Javascript - 循環內的AJAX請求

我使用jQuery發送AJAX請求，從服務器檢索數據。Javascript - 循環內的AJAX請求

該數據然後附加到元素。這應該發生5次，但它總是隨機發生3,4或5次。基本上，有時候循環會跳過AJAX請求，但大部分時間都會捕獲它。我如何確保每次都完成五次請求？而這也正是後面跳過AJAX請求這個隨機行爲的原因（側面說明我已經檢查請求的錯誤，但它從來沒有驚動了請求失敗。）

這裏是我的JS：

while (counter < 6) { 
    $.ajax({ 
     url:'http://whisperingforest.org/js/getQuote.php', 
     async: false, 
     dataType: 'jsonp', 
     success:function(data){ 
      $('.quoteList').append('<li>' + data +'</li>'); 
      totalQuotes++; 
     } 
    }); 
    counter++; 
}

Ps這發生在按下按鈕上。

來源

2014-03-24 pashOCONNOR

網絡選項卡上的內容是什麼？是否有5個http請求被髮送？ – zerkms

爲什麼要提出6個請求，而不是在一個請求中獲取所需的所有數據，然後將其分解爲6個列表項？ – jball

剛剛檢查了網絡選項卡（不知道這是否存在：P）...它使所有的請求，但30％的時間左右它得到'500內部服務器錯誤'... &&我' m製作了6個獨立的請求，因爲..這是我第一次使用AJAX，我無法弄清楚如何從多行提取信息，而不是單行的回顯字符串。 – pashOCONNOR

不要同步進行。使用回調。這裏是一個演示給你：http://jsfiddle.net/y45Lfupw/4/

<ul class="quoteList"></ul> 
<input type="button" onclick="getData();" value="Go Get It!"> 

<script> 
var counter = 0; 

window.getData=function() 
{ 
    /* This IF block has nothing to do with the OP. It just resets everything so the demo can be ran more than once. */ 
    if (counter===5) { 
     $('.quoteList').empty(); 
     counter = 0; 
    } 

    $.ajax({ 
     /* The whisperingforest.org URL is not longer valid, I found a new one that is similar... */ 
     url:'http://quotes.stormconsultancy.co.uk/random.json', 
     async: true, 
     dataType: 'jsonp', 
     success:function(data){ 
      $('.quoteList').append('<li>' + data.quote +'</li>'); 
      counter++; 
      if (counter < 5) getData(); 
     } 
    }); 
} 
</script>

設置async假塊主線程（負責執行JavaScript，呈現在屏幕等），並等待XHR 完成。

這幾乎總是一個可怕的想法。用戶不喜歡不響應的UI。（https://stackoverflow.com/a/20209180/3112803）

只要搜索計算器爲ajax async: false，你會發現在這個很多好的解釋。每個人都會阻止你使用async:false。這是一個很好的解釋：https://stackoverflow.com/a/14220323/3112803

來源

2014-03-24 22:23:16 gfrobenius

我給了一個確切的代碼一個嘗試，但不幸的是它並沒有爲我做任何事情，甚至沒有顯示一個報價..我不明白爲什麼？我嘗試在ajax調用之前和之後放置一個alert（'works'），兩者都被解僱......但沒有附加任何東西？ – pashOCONNOR

這裏是你的演示：** http：//jsfiddle.net/s368a/1/**看，它確實有效。 – gfrobenius

OOPS！對不起，我在編輯前複製了您的代碼，並錯過了自己添加數據類型> _ <; 現在工作完美無瑕！ – pashOCONNOR

jQuery提供的非常有趣的方法，當你執行asyncroniouse請求的循環並檢測到所有的ajax請求完成或沒有。它通過使用

var users=["a","b","c","d","e","f","g","h"]; 

var async_request=[]; 
var responses=[]; 
for(i in users) 
{ 
    // you can push any aysnc method handler 
    async_request.push($.ajax({ 
     url:'', // your url 
     method:'post', // method GET or POST 
     data:{user_name: users[i]}, 
     success: function(data){ 
      console.log('success of ajax response') 
      responses.push(data); 
     } 
    })); 
} 


$.when.apply(null, async_request).done(function(){ 
    // all done 
    console.log('all request completed') 
    console.log(responses); 
});

這裏$。當提供了一種基於零個或多個對象，代表異步事件通常遞延對象執行回調函數是可能的。

apply()轉換數組元素作爲不同的論點功能

$ .done是所有異步後通話功能。要求是完成。

來源

2016-08-19 11:34:24

JS的'.apply'不是'$ .apply'。 –

@ RokoC.Buljan，感謝您的關注.. :) –

注意：.done（）也會在某個ajax調用失敗時調用。這並不總是你想要發生的事情。 –

Javascript - 循環內的AJAX請求

回答

相關問題