Ajaxリクエストからデータを取得する

Question

私はすでにこの記事を読んでいますHow do I return the response from an asynchronous call?しかし、私は解決策を考え出すことができませんでした。 私は、AJAXリクエスト

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 chinese = getdata(); 

を言うときコンソールは罰金のすべてを表示しますが。私は得続ける：

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

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

は、誰もがここで私を助けることができますか？

Answer 1

問題は、同期結果を期待している非同期メソッドを使用していることです。

そのため次のような非同期呼び出しの結果にコードを使用する必要があります。

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'); 

を、私はそれが役に立てば幸い:)

Answer 2

エラーは、呼び出しの非同期性のためです。以下のようにAPIから成功応答を受け取ったら、値を割り当てることをお勧めします。

var chinese = getdata(); 

次に機能getdata()は

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); 

     } 
    }); 
} 

ようになり、あなたはまた、グローバルスコープでtext変数を宣言してからに値を割り当てることができます

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

のような機能initChinese()を作成します。 textsuccess内の変数は、新しい関数を作成する必要はありません。initChinese。

Answer 3

問題は、getdata関数は何も返しません。あなたのgetdata関数では、非同期リクエストであるajaxリクエストを行っています。したがって、要求しているデータは取得されず、getdata関数で返されることはありません。

しかし、あなたはあなたの成功の機能で要求されたデータを持つことになります。

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)]; 
     } 
    }); 
} 

私はあなたのコードをテストすることはできないんだけど、あなたは自分で休息をデバッグするためにきました。しかし、応答変数はおそらくあなたの "中国"変数です。

Answer 4

あなたは、コールバックを使用して試みることができるか、約束で見ることができます。

コールバックのアイデアは、ajaxリクエストの終了後に実行される関数を渡すことです。そのコールバックはパラメータ（この場合はレスポンス）を受け入れることができます。

コールバックの使用：（< IE11がこれをサポートしていない）約束を使用して

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

を：

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