使用jquery循环执行ajax回调

Looping through an ajax callback with jquery

本文关键字：ajax 回调 执行 循环 jquery 使用      更新时间：2023-09-26

我试图通过ajax调用3个不同的json文件具有相同的命名约定和结构(但略有不同的数据)。自从我在论坛上读到Alnitak的回应(jQuery ajax成功回调函数定义)以来，我一直在使用延迟对象而不是成功选项，以便我的ajax处理和回调处理可以解耦。下面是我的代码:

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<title>Stuff</title>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script> 
</head>
<body>
<script Language="JavaScript">
    var myData = [];
    var myURL =  ["ticker1.json","ticker2.json","ticker3.json"];    //New Array for my URLs
    function getData(m) {
        return $.ajax({
            url : myURL[m],  //<<<---Want to loop through this array
            type : 'GET',
            dataType: 'json'
        });
    }
    function handleData(data){
        for (var i=0; i<data.test.msgOne.length; i++){
            myData[i] = data.test.msgOne[i];
        }
    };

    for (var j=0; j<3; j++){
        console.log(j);  //<<---First console statement
        var ajaxCall = getData(j).done(handleData);
        $.when(ajaxCall).done(function(){ //wait until the ajax call is done before writing
            console.log(j);  //<<---Second console statement
            for (var k=0; k<3; k++){
                document.write(myData[k])
                document.write('<br><br>');
            }
        });
    }
</script>
</body>
</html>

我的代码由一个名为getData的函数组成，它执行ajax调用，然后是一个名为handleData的函数，它简单地从ajax调用中循环遍历json文件中的数据，并将数据存储在数组myData中。然后，for循环尝试将数组myData的数据输出到屏幕。然而，问题是我只从屏幕上的第一个json文件输出中获取数据，而不是按顺序获得所有三个。

所以我所做的是在for循环中输入两个console.log语句:一个在ajax调用之前，一个在ajax调用完成之后。第一个console.log按预期顺序输出0、1、2，第二个console.log输出3，这是意外的。因此，我假设在计数器完成之前ajax调用没有返回。我将for循环替换为一些逻辑语句和while循环(是的，我知道代码无限期运行的危险)，如下所示:

    var j=0;
    var whileFlag= new Boolean(1);
    var ajaxFlag = new Boolean(1);
    while (whileFlag) {
        if (ajaxFlag > 0) {
            ajaxFlag = 0;
            console.log(j);
            var ajaxCall = getData(j).done(handleData);
        }
        $.when(ajaxCall).done(function(){
            console.log(j);
            for (var k=0; k<3; k++){
                document.write(myData[k])
                document.write('<br><br>');
            }
            ajaxFlag = 1;
            j++;
        });
        if (j>=3) {whileFlag = 0};
    }

替换代码试图强制ajax调用完成，然后在移动到下一个ajax调用之前执行代码。最后的结果是浏览器被冻结了，这可不好。有人知道我如何才能将每个json文件的myData数组写到屏幕上吗?感谢任何帮助和建设性意见。此外，我需要保持ajax调用异步，因为我将在未来使用json数据类型。

附加问题:我相信浏览器挂起是由于ajax不返回调用，但问题是为什么?如果我在第一个示例中选择不实现for循环，而只是显式地将j变量设置为0、1或2，则所选json文件的数据将打印出来，但如果我做的更多，它将只打印第一个json文件中的数据集。这就像不可能进行多个ajax调用。任何见解和帮助是感激的。谢谢。

问题是你的while循环相当于…

 while (whileFlag) {
    if (ajaxFlag > 0) {
        ajaxFlag = 0;
        console.log(j);
        var ajaxCall = getData(j).done(handleData);
    }
    // Some thrid party (asynch Handler) changes j
    if (j>=3) {whileFlag = 0};
}

所以理想情况下，直到Ajax完成你的代码运行

 while (whileFlag) {
  if (j>=3) {whileFlag = 0};
    }

会挂起浏览器…

如果你真的想等待第二个Ajax调用直到第一个完成等等…

 function getData(m) {
    return $.ajax({
        url : myURL[m],  //<<<---Want to loop through this array
        type : 'GET',
        dataType: 'json',
        myJ: m
    });
    }

 function handleData(data){
    for (var i=0; i<data.test.msgOne.length; i++){
        myData[i] = data.test.msgOne[i];
    }
    for (var k=0; k<3; k++){
            document.write(myData[k])
            document.write('<br><br>');
    }
    if(this.myJ<2){
    var myJ=this.myJ;
       setTimeout(function(){
           getData((myJ+1)).done(handleData).fail(failed);
           }, 100);
    }
};

 getData(0).done(handleData);
function failed(jqXHR, textStatus, errorThrown){
 alert("textStatus="+textStatus);
alert("Error= "+errorThrown);
}

根据警告的注释，如果它工作，那么使用settimeout..它可以运行

如果你想自己测试，这里有三个json文件:

  • ticker1.json:

    {"测试":{"msgOne":("ticker1 Remote One"，"ticker1 Remote 2 "，"ticker1 Remote 3"]，:"msgTwo Remote2",:"msgThree Remote3"｝}

  • ticker2.json:

    {"测试":{"msgOne":("ticker2 Remote One"，"ticker2 Remote 2 "，"ticker2 Remote 3"]，:"msgTwo Remote2",:"msgThree Remote3"｝}

  • ticker3.json:

    {"测试":{"msgOne":("ticker3 Remote One"，"ticker3 Remote 2"，"ticker3 Remote 3"]，:"msgTwo Remote2",:"msgThree Remote3"｝}

如果您知道总是有三个调用，您可以这样做:

function getData(url) {
    return $.ajax({
        url: url,
        //...
    });
}
function handleData(data1, data2, data3) {
    //display the data however you like
}
$(document).ready(function() { 
    var request1 = getData(myUrl[0]);
    var request2 = getData(myUrl[1]);
    var request3 = getData(myUrl[2]);
    $.when(request1, request2, request3)
        .done(function(result1, result2, result3) {
            alert(result1.test.msgOne[0]);
        });    
});

在这种情况下，handleData()将只被调用一次，在所有三个调用都完成之后。

如果你不知道你会有多少结果，你可以遍历myUrl数组并将deferred压入数组。试试这个链接的例子，传递一个数组的deferred对象到$.when()。

另一个编辑

我已经更新了原始代码。我想你是被延迟对象困扰了。延迟对象(例如request1)不包含响应。当您调用$.when(request1).done(function(result1) { });时，request1的json结果被传递到函数中。

相关文章：