Wie gibt man Daten von der Ajax-Erfolgsfunktion zurück?

Question

In meiner Front-End-JavaScript-Anwendung, ich eine Ajax-Anfrage zum Abrufen von Daten vom Server. Sobald ich die Daten erhalte, möchte ich diese Information an die Ansicht zurückgeben.

var view_data; 
$.ajax({ 
    url:"/getDataFromServer.json", 
    //async: false, 
    type: "POST", 
    dataType: "json", 
    success:function(response_data_json) { 
     view_data = response_data_json.view_data; 
     console.log(view_data); //Shows the correct piece of information 
     return view_data; // Does not work. Returns empty data 
    } 
}); 

// return view_data; --> Keeping the return outside of the ajax call works but then I need to make my ajax call synchronous in order for this return clause to be executed after the ajax call fetches data. 

Wie würde ich das tun?

Answer 1

Anstatt data von success zurückzugeben: data an eine Funktion übergeben.

var view_data; 
$.ajax({ 
    url:"/getDataFromServer.json", 
    //async: false, 
    type: "POST", 
    dataType: "json", 
    success:function(response_data_json) { 
     view_data = response_data_json.view_data; 
     console.log(view_data); //Shows the correct piece of information 
     doWork(view_data); // Pass data to a function 
    } 
}); 

function doWork(data) 
{ 
    //perform work here 
} 

Answer 2

Ajax ist von Natur aus asyc. Der Code wartet nicht auf die Antwort von Ihrem Rückruf success, so dass die Daten außerhalb von success nicht zugänglich sind, sofern sie nicht übergeben werden.

Sie müssten die Daten in den Erfolg behandeln, versuchen Sie eine separate Methode/Funktion aufrufen:

function handleResponse(data) { 
    // do something with data 
} 

success:function(response_data_json) { 
    handleResponse(response_data_json.view_data); 
} 

hier sind die Dokumentationen zu jQuerys ajax method

Sie könnten auch nur einen externen Erfolg nutzen Funktioniert dann eher ein annon inline, das dann die Funktion trotzdem aufruft. es wird immer noch die Daten als param

function handleResponse(data) { 
    // do something 
} 

$.ajax({ 
    url:"/getDataFromServer.json", 
    //async: false, 
    type: "GET", 
    dataType: "json", 
    success:handleResponse 
}); 

UPDATE passieren: wie in den Kommentaren darauf hingewiesen, könnten Sie besser sein, eine http get Anfrage mit eher dann einem post. Sie both have advantages jedoch get Anforderungen können zwischengespeichert werden, so dass zum Abrufen von Daten könnte es eine Perf-Boost geben.