Come restituire i dati dalla funzione di successo di ajax?

Question

Nell'applicazione JavaScript front-end, faccio una richiesta ajax per recuperare i dati dal server. Non appena ho i dati, voglio restituire quella informazione alla vista.

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. 

Come faccio?

Answer 1

Invece di restituire data da success: passare data a una funzione.

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 è per natura asyc. Il codice non attende la risposta dal tuo callback success, quindi i dati non sono accessibili al di fuori di success se non vengono passati.

Avresti bisogno di gestire i dati all'interno del successo, provate a chiamare un metodo/funzione separata:

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

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

qui ci sono i documenti sulla ajax method

Si potrebbe anche solo usare un successo esterno di jQuery funzione piuttosto che un annon inline che poi chiama comunque la funzione. sarà ancora passare i dati come un param

function handleResponse(data) { 
    // do something 
} 

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

UPDATE: come sottolineato nei commenti, si potrebbe essere meglio con una richiesta http get piuttosto che un post. essi both have advantages tuttavia le richieste get possono essere memorizzate nella cache, quindi per il recupero dei dati potrebbe dare una spinta perfetta.