Question

我正在尝试循环使用具有相同命名约定和结构的3个不同json文件的ajax调用（但数据略有不同）。自从我在论坛中阅读Alnitak的回复（jQuery ajax success callback function definition）以来，我一直在使用延迟对象而不是成功选项，这样我的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，第二个给出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调用然后执行代码。好吧，最终的结果是一个冻结的浏览器，这是没有bueno。有谁知道我怎样才能将每个json文件的myData数组写入屏幕？任何帮助和建设性意见表示赞赏。另外，我需要保持ajax调用异步，因为我将来会使用jsonp数据类型。

其他问题：我认为浏览器挂机是因为ajax没有回复电话，但问题是为什么？如果我选择不在第一个示例中实现for循环，而只是将j变量显式设置为0，或1或2，则数据打印出来对于所选的json文件很好，但是如果我做的多于它只会打印第一个json文件中的数据集。这就像是不可能做多个ajax调用或其他东西。任何见解和帮助表示赞赏。感谢。

Answer 1

问题是你的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 ..它将起作用

Answer 2

如果你知道总有三个电话，你可以这样做：

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推送到一个数组中。尝试this link获取将deferred个对象数组传递给$.when()的示例。

其他编辑

我已更新原始代码。我想你已经挂断了延期对象。延迟对象（例如request1）不包含响应。当您调用$.when(request1).done(function(result1) { });时，request1的json结果将传递给函数。

Answer 3

以下是三个json文件，以防您想自己测试：

ticker1.json：

{ “测试”：{ “msgOne”：[ “ticker1 Remote One”， “ticker1 Remote Two”， “ticker1遥控三” ] “msgTwo”：“Remote2”， “msgThree”：“Remote3” } }
ticker2.json：

{ “测试”：{ “msgOne”：[ “ticker2 Remote One”， “ticker2 Remote Two”， “ticker2遥控三” ] “msgTwo”：“Remote2”， “msgThree”：“Remote3” } }
ticker3.json：

{ “测试”：{ “msgOne”：[ “ticker3 Remote One”， “ticker3 Remote Two”， “ticker3遥控三” ] “msgTwo”：“Remote2”， “msgThree”：“Remote3” } }

使用jquery通过ajax回调循环

3 个答案: