用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獲取被觸發，然后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']);

Answer 2

發生的是在運行查詢之后，ajax調用完成之前的代碼。 您的數組已填充完畢，請放心，但是因為AJAX是異步運行的，所以它將僅在ajax調用之后分配值。

例如，如果您在ajax調用之后設置了10秒鍾的超時時間（取決於AJAX調用花費的時間），然后調用了數組值，您會發現它們已填充（前提是AJAX已運行並正確通過了回調函數） ）。

因此，在您的代碼中，逐步發生了什么。

You display the values from the array which shows john red

You make the AJAX call, when this call has completed it will perform your success: function

The ajax call takes (lets say) 1 second to complete

Whilst your page is waiting for the call to complete and update the values it moves onto the next bit of code which displays the array, as the array hasn't been updated yet as success hasn't been called it still displays john red

1 seconds later the success function is called, assigns the new names to the array and prints them out.

Answer 3

ajax調用是異步的，這意味着其余代碼將被執行，而不管何時執行和返回ajax。 如果您的代碼取決於結果，則將其包裝在一個函數中，然后從ajax的回調（成功函數）中調用它。

Answer 4

我不知道這些東西是否是標准的東西，但是可以用：

var xmlURL = "Data/XML/"+GetURLParameter("xml");
var xmlInto = {};

$.get(xmlURL, function(xml) {
    $(xml).find("line").each(function(){
        xmlInto[line_number] = line_info;
    });             
}, 'xml');

console.log(xmlInto);