javascript - 使用 Jquery 将 ajax 响应保存到数组

Question

我有一个 Jquery ajax 调用，它从我得到的 php 文件中获取 json 响应，json 响应很棒，我可以正确地控制台记录响应，但是我似乎无法将信息保存在ajax结果，它不会更新数组。代码如下所示，我在下面发布了结果。

window.array={name: 'john',color:'red'};    

 console.log(array['name']);
 console.log(array['color']);

$.ajax({
    url : 'getJsons.php',
    type : 'POST',
    data : data,
    dataType : 'json',
    success : function (data) {

      array['name'] = data['name'];
      array['color'] = data['color'];
      console.log(array['name']);
      console.log(array['color']);
     }        
});

 console.log(array['name']);
 console.log(array['color']);

这将产生以下控制台:

 john
 red

 john
 red

 marry
 blue

所以我第一次就得到了控制台，但它似乎在 ajax 调用之后在 ajax 调用之前加载脚本，为什么呢？因为这使得我无法在其余代码中使用 ajax 结果，因为它是在脚本加载后获取的。有没有办法让 ajax 在其余部分之前运行？

Answer 1

由于您无法判断服务器的 ajax 响应何时到达，因此默认情况下 AJAX 是异步的。这意味着 $.ajax get 被触发，然后 javascript 引擎继续执行代码的其余部分(在您的示例中，ajax 调用之外的两个 console.log )。在将来的某个地方，ajax 调用可能(也可能不会)从服务器获取响应(并通过更改其状态来通知这一点)。此时，JavaScript 引擎将处理所谓的“回调”函数 - 当 ajax 调用完成时将执行的代码。您将回调函数定义为 ajax 方法的 success 参数。

这就是为什么执行代码的正确方法是运行依赖于回调函数结果的所有内容。将所有内容直接放在那里，或者声明一个单独的函数，然后您可以在成功函数中调用该函数:

$.ajax({
    /*...*/,
    success : function (data) {

      array['name'] = data['name'];
      array['color'] = data['color'];

      /* either put all your dependent code here */

      /* or just call a callback function: */
      callback(data);

     }        
});

/* code to be executed after the ajax call */
function callback(data){

   // work with the response here
   console.log(data);

}

前面的坏主意:

或者，您可以告诉调用是同步的(这很糟糕，因为您的浏览器在等待服务器响应时基本上被卡住)并保持代码不变。

$.ajax({
      /*...*/,
      async : false,     
});
// risk some waiting time (possibly the full duration of a timeout!!)
// the browser is locked during this time

// continue normally
console.log(array['name']);
console.log(array['color']);