无法通过 AJAX 将数据传递给 Laravel答案

【问题标题】：Can't pass data via AJAX to Laravel无法通过 AJAX 将数据传递给 Laravel
【发布时间】：2019-02-22 23:53:00
【问题描述】：

我遇到了一个问题，我无法通过 AJAX 将变量传递给 Laravel 控制器。这是我的代码：

提交订单的AJAX函数：

function submitOrder() {
    console.log(JSON.stringify(order.positions));
    console.log('SENDING ORDER ',order.positions, ' to the database');
    event.preventDefault();
    // var id = this.id;
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajaxSetup({
        headers: {
            'Content-Type':'application/json',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        //FIXME No response
        dataType: 'json',
        type: "post",
        url: '/orders/api/store',
        data: {
            _method: 'post',
            _token: CSRF_TOKEN,
            order: JSON.stringify(order.positions)
        },
        success: function( response ) {
            console.log(response);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus); alert("Error: " + errorThrown);
        }
    });
}

routes.php

Route::post('/orders/api/store', 'OrdersController@apiStore');

及控制器功能：

public function apiStore(Request $request) {
    $response = [
        'request' => $request->order,
        'responseText' => 'works',
        'status' => '200'
    ];

    return response()->json($response); 
}

我得到的回应：

SENDING ORDER  [{…}]0: 
    {product_id: 3, name: "Мороженое фрукты", price: "45.00", quantity: "1"}
    to the database // Sending this array
response {request: null, responseText: "works", status: "200"} //This is the response from Laravel

可以看到，请求变量为null，但一定是$request->order值，是AJAX发送的。

【问题讨论】：

'order' 是主键/外键吗？
检查您的浏览器开发工具 - order 真的发布了吗？
@Don'tPanic 是的，显示成功通过：请求有效负载：_method=post&token=5hRAHn0Edzxv64gBRfMk0kLQHM8OaWYOaGtJpiHY&order=%5B%7B%22product_id%22%3A1%2C%22name%22%3A%22%D0 %9C%D0%BE%D1%80%D0%BE%D0%B6%D0%B5%D0%BD%D0%BE%D0%B5+%D0%B2%D0%B0%D0%BD%D0%B8 %D0%BB%D1%8C%22%2C%22price%22%3A%2251.00%22%2C%22quantity%22%3A%221%22%7D%5D

标签： php jquery ajax laravel

【解决方案1】：

我建立了一个快速原型，这对我来说是一个工作示例：

Laravel 后端

// web.php

Route::post('/test', 'HomeController@test');

// HomeCrontroller.php

class HomeController extends Controller
{

   // ...

    public function test()
    {
      $response = [
        'request' => request()->data,
        'responseText' => 'works',
        'status' => '200'
      ];

      return response()->json($response);
    }

    // ...

}

前端

// some js

axios
    .post("/test", {
         data: {
             value: "key"
         }
     })
     .then(res => console.log(res));

// outcome of console.log(res)

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data:
request: {value: "key"}
responseText: "works"
status: "200"
// ...

如果这对您不起作用，请检查您的版本。

【讨论】：

它应该可以工作，我编辑了我的答案并提供了一个完整的工作示例。
虽然很高兴您验证了 OP 代码有效，但这不是答案。
这不是 OP 代码。我试图展示如何正确设置项目以及如何以正确的方式处理请求对象。

【解决方案2】：

经过 2 天的尝试，我终于找到了解决方案：创建数据变量（对象），使用所需数据设置 if 字段，并在传递到后端时对其进行 JSON.stringify。

function submitOrder() {
console.log(JSON.stringify(order.positions));
console.log('SENDING ORDER ',order.positions, ' to the database');

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var data = {};
data.order = order.positions;
data._method = 'POST';
data._token = CSRF_TOKEN;
$.ajax({
    type: "POST",
    url: '/orders/api/store/',
    data: JSON.stringify(data),
    success: function( response ) {
        console.log(response);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Status: " + textStatus); alert("Error: " + errorThrown);
    }
});

}

【讨论】：