Jquery.ajax() 局部變量不能分配給全局

Question

我有一個 jquery ajax 代碼如下：

$(document).ready(function() {
  var global_arr = new Array();
  $.ajax({
    url: 'result.php',
    type: 'post',
    dataType: 'json',
    success: function(data) {
       $.each(data, function(key, value) {
          global_arr.push(value.name);
       });
       alert(global_arr); //get correct value, works fine
     }
  }); //end of ajax function
  alert(global_arr); //get null, it doesn't work properly
});

請注意警告 global_arr 的行，為什么我無法從 $.ajax() function 中獲取值？ 感謝任何人對此的幫助。

Answer 1

Ajax需要時間來完成。 函數執行時間不會太長。 因此，當您在ajax請求之外獲得警報時，ajax請求仍然使用時間來完成（在傳輸或服務器端操作中）。

您始終可以等待ajax方法完成。

$(document).ready(function() {

 var global_arr = new Array();
 var complete = false;//flag to wait for ajax completion
 $.ajax({
  url: 'result.php',
  type: 'post',
  dataType: 'json',
  success: function(data) {
   $.each(data, function(key, value) {
      global_arr.push(value.name);
   });
   alert(global_arr); //get correct value, works fine
   complete = true;//mark ajax as complete
  }
 }); //end of ajax function

 (function runOnComplete(){
  if( complete ){//run when ajax completes and flag is true
   alert(global_arr);
  }else{
   setTimeout(runOnComplete,25);//when ajax is not complete then loop
  }
 })()
});

但是，最常見的方法是使用回調。

$(document).ready(function() {

 function runOnComplete(){//code executes once ajax request is successful
  alert(global_arr);
 }
 var global_arr = new Array();
 $.ajax({
  url: 'result.php',
  type: 'post',
  dataType: 'json',
  success: function(data) {
   $.each(data, function(key, value) {
    global_arr.push(value.name);
   });
   alert(global_arr); //get correct value, works fine
   runOnComplete();//callback
  }
 }); //end of ajax function
});

Answer 2

Ajax是異步的。 當JS引擎到達你的無效alert（）行時，AJAX調用還沒有機會從服務器獲得響應並設置變量。

這就是內部alert（）有效的原因。 當響應從服務器進入時它會被執行。

Answer 3

那是因為alert(global_arr); //get null, it doesn't work properly alert(global_arr); //get null, it doesn't work properly在$.ajax完成之前運行alert(global_arr); //get null, it doesn't work properly

Answer 4

我的建議是將其分解為3個功能，這樣會更有意義。 你需要ajax，handelRequest，onComplete。 您可能還想為您的ajax函數添加錯誤處理程序，因此如果它失敗了，它可以通過鎖定用戶的腳本來完成。

$(document).ready(function () {

    var global_arr = new Array();

    $.ajax({
        url: 'result.php',
        type: 'post',
        dataType: 'json',
        success: handelRequest(data),
        error: handleError             
    });

    function handelRequest(data) {          
        $.each(data, function (key, value) {
            global_arr.push(value.name);
        });
        onComplete(global_arr); //get correct value, works fine
    }

    function onComplete(global_arr){
        // then here you can do what ever you
        // you would like with the array
        alert(global_arr);
    }

    function handleError(){
        // gracefully fail
    }

})

Answer 5

Ajax function runs asynchronously and before ajax function adds incoming data in your array, the outer alert function runs and for this reason alerts an empty array.

您可以使用async-await使外部警報 function 等待傳入數據。

  $(document).ready(async function() {
  var global_arr = new Array();
  await $.ajax({
    url: 'result.php',
    type: 'post',
    dataType: 'json',
    success: function(data) {
       $.each(data, function(key, value) {
          global_arr.push(value.name);
       });
       alert(global_arr);
     }
  }); //end of ajax function
  alert(global_arr); //it will work fine now
});