3

我想在循环中执行 Ajax 以一一获取数据。我在我的 javascript 函数中做了类似的事情。

var resultType = $("input[name='resultType']:checked").val();
var finalResult = "";
var loadingMessage = "<img src=\"./results/loader.gif\" alt=\"Loading...\"/><br/>This may take several minutes...";
var htmlMessage=loadingMessage;

$("#result").html(htmlMessage);

for(var i=1;i<5;i++){
    $.ajax({
        type: "GET",
        url: "results/result_html.php?usn="+i+"&resultType="+resultType,
        dataType:"JSON",
        success:function(result){
            finalResult+=result;
            result=result+htmlMessage;
            $("#info").hide();
            $("#result").html(result);              
            $("#usn").attr("placeholder", "Class USN");
        }
    });
}

但它并没有像我预期的那样执行。如果我删除 for 循环并直接给出值，那么一切都是正确的。我对 Ajax 不太熟悉。请问有人可以帮我吗？

4

2 回答 2

2

我在这段代码中没有看到闭包的问题。我相信您要实现的目标与强制顺序加载有关。您当前提议的方式将“并行”发出所有 ajax 调用。问题在于 ajax 调用的异步特性。

如果您想对请求进行“排序”，则可以执行以下操作：

var resultType =$("input[name='resultType']:checked").val();
var finalResult="";
var loadingMessage="<img src=\"./results/loader.gif\" alt=\"Loading...\"/><br/>This may   take several minutes...";
var htmlMessage=loadingMessage;
$("#result").html(htmlMessage);

var i = 1;

function loadNext(){
    if (i < 5){
        $.ajax({
            type: "GET",
            url: "results/result_html.php?usn="+i+"&resultType="+resultType,
            dataType:"JSON",
            success:function(result){
                finalResult+=result;
                result=result+htmlMessage;
                $("#info").hide();
                $("#result").html(result);              
                $("#usn").attr("placeholder", "Class USN");
                loadNext();
            }
        });
        i++;
    }
}
于 2013-02-26T14:52:49.017 回答
2

你正在处理一个常见的闭包问题。当您的 ajax 请求被执行时，计数器“i”已经并且始终处于它的最后一个值 (4)。

你必须为那个计数器创建一个新的范围，这样它就不会发生；你可以通过两种方式做到这一点：

简单的方法：

for(var i=1;i<5;i++){
    var counter = i;
    $.ajax({
        type: "GET",
        url: "results/result_html.php?usn="+counter+"&resultType="+resultType,
        dataType:"JSON",
        success:function(result){
            finalResult+=result;
            result=result+htmlMessage;
            $("#info").hide();
            $("#result").html(result);              
            $("#usn").attr("placeholder", "Class USN");
        }
    });
}

或正确的方法：

for(var i=1;i<5;i++){
(function(counter){
    $.ajax({
        type: "GET",
        url: "results/result_html.php?usn="+"counter"+"&resultType="+resultType,
        dataType:"JSON",
        success:function(result){
            finalResult+=result;
            result=result+htmlMessage;
            $("#info").hide();
            $("#result").html(result);              
            $("#usn").attr("placeholder", "Class USN");
        }
    });
})(i);}
于 2013-02-26T14:42:07.070 回答