problemy z wykonywaniem wywołania ajax jquery w ramach funkcji

Question

Chciałbym umieścić wywołanie ajax w funkcji, ponieważ używam go wielokrotnie w wielu lokalizacjach. Chcę otrzymać zmanipulowaną wersję odpowiedzi. Oto, co próbuję zrobić (znacznie uproszczone).

a = getAjax(); 
$('body').append('<div>'+a+'</div>'); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    return response; 
    }); 
} 

Co się jednak dzieje, to funkcja append działa przed zdefiniowaniem "a" w funkcji getAjax. jakieś pomysły?

Answer 1

Istnieją dwa sposoby taggle to. jeden jest użycie zwrotnego sukcesu:

$.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    AppendResponse(response); 
    }); 

Inne jest ustawiony asynchroniczny do fałszywego http://api.jquery.com/jQuery.ajax/:

var a; 
getAjax(); 
$('body').append('<div>'+a+'</div>'); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    async: false, 
    success: function(response) { 
    a = response; 
    }); 
} 

Ważna informacja dotycząca nieprzestrzegania async:

żądań cross-domain i Typ danych: " żądania jsonp "nie obsługują operacji synchronicznej.

Answer 2

AJAX jest asynchroniczny. Oznacza to, że kod w module zarządzania sukcesem jest opóźniony, dopóki żądanie nie zakończy się powodzeniem, podczas gdy reszta kodu będzie kontynuowana normalnie. Musisz umieścić odpowiedni kod w sukces obsługi AJAX:

getAjax(); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    $(document.body).append('<div>'+response+'</div>'); 
    }); 
} 

Zauważ, że mam również zoptymalizowane selektor body za pomocą natywnego Javascript document.body raczej niż przy użyciu standardowego selektora znaczników.

---

Edit wersja oddzwaniania

function getAjax(callback) { 
    $.ajax({ 
     type: 'GET', 
     url: 'someURL', 
     success: callback 
    }); 
} 

Teraz można zrobić inline kodu przy użyciu funkcji oddzwaniania:

getAjax(function(response) { 
    $(document.body).append('<div>'+response+'</div>'); 
}); 

lub

getAjax(function(response) { 
    alert(response); 
}); 

lub cokolwiek.

Kod w anonimowym wywołaniu funkcji zostanie przetworzony po zakończeniu żądania AJAX.

Answer 3

Dlaczego nie zwrócisz odpowiedzi na inną funkcję w oddzwanianiu powodzenia. To powinno obsługiwać potrzeby różnych odpowiedzi:

getAjax(); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    AppendResponse(response); 
    }); 
} 

function AppendResponse(response) { 
$('body').append('<div>'+response+'</div>'); 
} 

Answer 4

Jedna sugestia mam to przekazać spust do polecenia, które chcesz uruchomić w funkcji AJAX tak, że to będzie działać po AJAX otrzymał response-

a = getAjax(); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    inputText(response); 
    }); 
} 

inputText(someText) { 
$(document.body).append('<div>'+ someText +'</div>'); 
} 

w ten sposób można tworzyć if/inne alternatywy, aby nadal korzystać z tego samego polecenia AJAX dla różnych wyników