为什么 ajax 在 laravel 项目中返回错误响应消息？可能的原因是什么？

Question

在任何事情之前，我已经在 SOF 和互联网上搜索了我的问题的解决方案，但我没有找到对我的代码有用的解决方案：/

我编写了一个代码，用于在电子商务 laravel 项目中获取产品价格取决于产品大小， 只是为了测试我想（提醒）大小 id ，这是我使用 ajax 的 js 代码：

已编辑

  $(document).ready(function(){
   $("#selSize").change(function(){
     var idSize = $(this).val();
     var arr = idSize.split('/');
     var productID = arr[0];
     var sizeID = arr[1];
     //alert(productID);
     $.ajax({
        type:'get',
        data: {sizeID:sizeID},
        dataType: 'application/json' ,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        contentType: "application/json; charset=utf-8",
        url:productID+'/get-products-price',
        success:function(resp){
            alert(resp);
        },error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
          }
     });
   });
});

这是我浏览产品可能尺寸的 html 代码：

<h3 class="my-3">Product Sizes</h3>
   @if(count($sizes) > 0)
   <select id="selSize" name="size"style="width:180px;margin-bottom:40px;height:30px;">
         <option>Select size</option>
         @foreach($sizes as $size)
             <option value="{{$product->id}}/{{$size->id}}">({{$size->width}},
                                            {{$size->height}},
                                            {{$size->length}}, 
                                            {{$size->thickness}})
                                           (cm)
             </option>
         @endforeach
    </select>
    @endif

这就是我使用的控制器功能：

public function getProductPrice(Request $request)
{
    $data = $request->all();
    echo "<pre>"; print_r($data); die;
}

还有我做路由的地方：

Route::get('{id}/get-products-price' , 'SizesController@getProductPrice');

最后它显示给我的警报说：（本地主机说未定义），意思是从 ajax 返回错误警报，为什么？

网络控制台中显示的 url 是 (http://localhost/AishaStore/public/details/11/get-products-price?sizeID=2)

希望我能在你的帮助下找到解决办法

Answer 1

在你的 ajax 参数中添加：

dataType: 'json'

让我知道它是否有效，但我认为这是您缺少的部分，因为您没有定义要发送到后端的变量的数据类型。有时也发生在我身上，我忘记了。

你也可以添加：

 contentType: "application/json; charset=utf-8",

编辑：

error: function(xhr, status, error) {
  var err = eval("(" + xhr.responseText + ")");
  alert(err.Message);
}

打印您的错误消息，以便您了解 ajax 的错误以便进行调试。

新编辑：

根据 cmets 的反馈，您的 url 中缺少 id：

Route::get('{id}/get-products-price' , 'SizesController@getProductPrice')->name('get-products-price');

Answer 2

我认为错误在这里：

url:'/get-products-price',

改成：

url: "{{ url('/get-products-price') }}",  // url() function will generate the right url for the application

然后重试并打开控制台以检查确切的响应。

Answer 3

除了检查 CSRF 令牌作为 POST 参数外，VerifyCsrfToken 中间件还将检查 X-CSRF-TOKEN 请求标头。例如，您可以将令牌存储在 HTML 元标记中：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后，一旦您创建了meta 标记，您就可以指示 jQuery 之类的库自动将标记添加到所有请求标头中。这为基于 AJAX 的应用程序提供了简单、方便的 CSRF 保护：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})

;

尝试在你的控制器中添加这个

 return response()->json(['success'=>'Record is successfully added']);