jQuery .ajax() zmiennej lokalnej nie można przypisać do globalnego

Question

Mam kod jquery ajax w następujący sposób:

$(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 
}); 

Zawiadomienie linie ostrzega global_arr, dlaczego nie mogę uzyskać wartość z $ Funkcja .ajax()? Dziękuję wszystkim za pomoc w tej sprawie.

Answer 1

Ajax Potrzeba czasu, aby zakończyć. Wykonywanie funkcji nie zajmuje prawie tyle samo czasu. Więc zanim dojdziesz do alertu poza żądaniem ajax, żądanie ajax nadal wykorzystuje czas do zakończenia (w transmisji lub w działaniach po stronie serwera).

Zawsze możesz poczekać na zakończenie metody 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 
    } 
})() 
}); 

Jednak najczęstszym sposobem jest użycie wywołania zwrotnego.

$(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 jest asynchroniczny. W momencie, gdy silnik JS dociera do niedziałającej linii alert(), wywołanie AJAX nie miało jeszcze szansy na uzyskanie odpowiedzi z serwera i ustawienie zmiennej.

Właśnie dlatego wewnętrzny alert() działa. Jest wykonywany, gdy odpowiedź przychodzi z serwera.

Answer 3

to dlatego alert(global_arr); //get null, it doesn't work properly biegnie przed $.ajax zakończyła

Answer 4

Moją sugestią byłoby przełamanie tego w 3 funcitonach, więc będzie to miało większy sens. Będziesz potrzebował ajax, handelRequest, onComplete. Możesz również dodać obsługę błędów do funkcji ajax, więc jeśli się zawiedzie, może to zrobić bez blokowania skryptu dla użytkownika.

$(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 
    } 

})