Daten von der Ajax-Anfrage erhalten angezeigt

Question

Ich habe diesen Artikel bereits gelesen How do I return the response from an asynchronous call? Jedoch konnte ich keine Lösung finden. Ich mache eine Ajax-Anfrage

function getdata(url) 
{ 
console.log('Started'); 
jQuery.ajax({ 
type: "GET", 
url: "http://myserver.com/myscript.php", 
dataType: "json", 
error: function (xhr) { 
    console.log('Error',xhr.status); 
     }, 
success: function (response) { 
    console.log('Success',response); 

     } 
    }); 
} 

und Konsole zeigt alles in Ordnung, aber wenn ich sage,

var chinese = getdata(); 

die Daten zu erhalten. Ich erhalte:

Uncaught TypeError: Cannot read property 'length' of undefined error for this line

var text = chinese[Math.floor(Math.random()*chinese.length)]; 

Kann mir hier jemand helfen?

Answer 1

Das Problem besteht darin, dass Sie eine asynchrone Methode verwenden, die ein synchrones Ergebnis erwartet.

Deshalb sollten Sie den Code in das Ergebnis des asynchronen Aufruf wie folgt verwendet werden:

function getdata(url) { 
    console.log('Started'); 
    jQuery.ajax({ 
    type: 'GET', 
    url: url, 
    dataType: 'json', 
    error: function(xhr) { 
     console.log('Error', xhr.status); 
    }, 
    success: function(chinese) { 
     var text = chinese[Math.floor(Math.random()*chinese.length)]; 
     // Do something else with text 
    } 
    }); 
} 

getData('http://myserver.com/myscript.php'); 

Ich hoffe, es hilft :)

Answer 2

Der Fehler, den Sie erhalten, liegt an der asynchronen Art des Anrufs. Ich schlage vor, dass Sie den Wert zuweisen, nachdem Sie die Erfolg-Antwort von der API wie unten erhalten haben.

var chinese = getdata(); 

Dann ist die Funktion getdata() wird wie

function getdata(url) 
{ 
console.log('Started'); 
jQuery.ajax({ 
type: "GET", 
url: "http://myserver.com/myscript.php", 
dataType: "json", 
error: function (xhr) { 
    console.log('Error',xhr.status); 
     }, 
success: function (response) { 
    initChinese(response.data); 

     } 
    }); 
} 

sein und eine Funktion initChinese() wie

var text; 
function initChinese(chinese){ 
text = chinese[Math.floor(Math.random()*chinese.length)]; 
} 

Sie können auch die text Variable im globalen Bereich erklären erstellen und dann den Wert zuweisen text Variable innerhalb der success Funktion, ohne eine neue Funktionerstellen zu müssen.

Answer 3

Das Problem ist, Ihre Getdata-Funktion gibt nichts zurück. In Ihrer getdata-Funktion führen Sie eine Ajax-Anfrage aus, die eine asynchrone Anfrage ist. Die von Ihnen angeforderten Daten werden nicht zurückgegeben und können nicht mit Ihrer getdata-Funktion zurückgegeben werden.

Aber Sie werden die angeforderten Daten in Ihren Erfolg Funktion haben:

function getdata(url) 
{ 
console.log('Started'); 
jQuery.ajax({ 
type: "GET", 
url: "http://myserver.com/myscript.php", 
dataType: "json", 
error: function (xhr) { 
    console.log('Error',xhr.status); 
     }, 
success: function (response) { 
    console.log('Success',response); 
var text = response[Math.floor(Math.random()*response.length)]; 
     } 
    }); 
} 

Da ich nicht in der Lage bin Ihr Code zu testen, haben Sie auf Ihrem eigenen, den Rest zu debuggen. Aber die Antwortvariable ist höchstwahrscheinlich Ihre "chinesische" Variable.

Answer 4

Sie versuchen, Rückrufe verwenden könnte oder Sie Promises aussehen könnte.

Die Idee mit Rückrufen besteht darin, dass Sie eine Funktion übergeben, die ausgeführt wird, nachdem die Ajax-Anforderung abgeschlossen ist. Dieser Callback kann einen Parameter akzeptieren, in diesem Fall die Antwort.

Mit Rückrufe:

function getData(url, successCallback, errorCallback) { 
 
    console.log('Started'); 
 

 
    jQuery.ajax({ 
 
    type: "GET", 
 
    url: url, 
 
    dataType: "json", 
 
    error: function(xhr) { 
 
     errorCallback(xhr.status); 
 
    }, 
 
    success: function(response) { 
 
     successCallback(response); 
 
    } 
 
    }); 
 
} 
 

 
var chinese; 
 

 
getData("http://myserver.com/myscript.php", function(response) { 
 
    chinese = response; // you can assign the response to the variable here. 
 
}, function(statusCode) { 
 
    console.error(statusCode); 
 
});

Mit Promises (< IE11 dies nicht unterstützt):

function getData(url) { 
 
    return new Promise(function(resolve, reject) { 
 
    console.log('Started'); 
 
    
 
    jQuery.ajax({ 
 
     type: "GET", 
 
     url: url, 
 
     dataType: "json", 
 
     error: function(xhr) { 
 
     reject(xhr.status); 
 
     }, 
 
     success: function(response) { 
 
     resolve(response); 
 
     } 
 
    }); 
 
    }); 
 
} 
 

 
var chinese; 
 

 
getData("http://myserver.com/myscript.php").then(function(response) { 
 
    chinese = response; 
 
    console.log(chinese); 
 
}, function(statusCode) { 
 
    console.error(statusCode); 
 
});