Question

我无法弄清楚为什么我的JSON中的多维数组在响应中总是为空。如果我像这样声明我的JSON静态..

  var data = {
    foo:  123,
    bar:  456,
    cars: [
      { name:"Ford", test: 4},
      { name:"BMW" },
      { name:"Fiat"}
    ]
  };

响应：

(index):78 Success
(index):79 {"foo":123,"bar":456,"cars":[{"name":"Ford","test":4},{"name":"BMW"},{"name":"Fiat"}]}

这样可行，但是当我动态添加数组时，响应为空..

  var data = {
    foo:  123,
    bar:  456,
  }; 

  data.cars: [];

  function getMousePos(e) {
      return {x:e.clientX,y:e.clientY};
  }

  document.onmousemove=function(e) {
      var mousePos = getMousePos(e);

      data.cars.push({x: mousePos.x, y: mousePos.y});

      console.log(JSON.stringify(data));
  };
  var createCORSRequest = function(method, url) {
  var xhr = new XMLHttpRequest();

  if ("withCredentials" in xhr) {
    // Most browsers.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // IE8 & IE9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
};

var url = 'http://localhost:80/t';
var method = 'POST';
var xhr = createCORSRequest(method, url);

xhr.onload = function() {
  console.log("Success");
  console.log(xhr.responseText);
};

xhr.onerror = function() {
  console.log("Error");
};

xhr.send(JSON.stringify(data));

我发送之前的控制台..

{"foo":123,"bar":456,"cars":[{"x":320,"y":8},{"x":321,"y":20}]}

我得到的回应..

(index):79 Success
(index):80 {"foo":123,"bar":456,"cars":[]}

当我将数组推送到JSON字符串时，“cars”数组在响应中始终为空。我已经阅读了我能找到的关于此的每个stackoverflow线程，但无法弄清楚问题。

服务器上的响应代码

public function getJson(Request $request) {

    $content = $request->json()->all();


    return $content;
}

我还应该指出我在响应服务器上使用Laravel 5.4。

Answer 1

我可以看到2个错误：

定义Cars对象，如data.cars = [];而是使用data.cars：[];
Ajax调用本质上是异步的，基于您编写的代码 xhr.send 将在 document.onmousemove 函数之前调用。 onmousemove需要触发 mousemove 事件，但xhr.send不在任何函数内部，因此在页面加载后立即调用。

所以你必须进行2次更改：

定义Cars对象，如data.cars = [];
在 mousemove 函数中分配数据后调用 xhr.send 方法，即在mousemove或其他函数内部

将数组推送到JSON时为空响应

1 个答案: