Question

Ajax程序没有像我预期的那样运行。见代码

$(document).ready(function(){
$("input").keyup(function() {
    for(var i=400;i<421;i++){
        (function(counter){
            counter=String(counter);
            $.ajax({
                type: "GET",
                url: "results/result_html.php?usn="+txt+counter+"&resultType="+resultType,
                dataType:"JSON",
                success:function(result){
                    $("#info").hide();
                    $("#result").html(result);              
                    $("#usn").attr("placeholder", "Class USN");
                }
            });
        })(i);
    }
    alert("hai");
});});

在这段代码中，我想在完成for循环中的所有Ajax请求后显示警告。但是，当我运行此代码时，警报首先显示。我是Ajax的新手，请任何人帮助我按照我的预期运行。

Answer 1

Ajax是异步的，这意味着它将继续并行运行代码。在Ajax请求完成后调用success函数。你能做的是：

$(document).ready(function(){
$("input").keyup(function() {
    var loopsToDo = 20, done=0;
    for(var i=400;i<421;i++){
            var counter=String(i);
            $.ajax({
                type: "GET",
                url: "results/result_html.php?usn="+txt+counter+"&resultType="+resultType,
                dataType:"JSON",
                success:function(result){
                    $("#info").hide();
                    $("#result").html(result);              
                    $("#usn").attr("placeholder", "Class USN");
                },
                complete : function(){
                    done++;
                    if( done == loopsToDo)
                    {
                        alert("DONE")
                    }
                }
            });
    }

});});

Answer 2

你的代码很奇怪。为什么会这样？

for(var i=400;i<421;i++)

此外，警报将在任何Ajax调用之前首先显示，因为ajax是异步的，这意味着它单独运行到其余代码。由于您正在运行20个Ajax请求，因此警报不会等待所有20个请求完成。您需要做的是在成功部分中记录Ajax调用，当等于20时，显示警报。

Answer 3

因为AJAX调用是异步的，所以它将设置AJAX调用，然后继续执行脚本。 'success'参数指定一旦收到响应就要使用的回调 - 这可能在任何时候发生（因此，异步）。

$(document).ready(function(){
    $("input").keyup(function() {
        for(var i=400;i<421;i++){
            (function(counter){
                counter=String(counter);
                $.ajax({
                    type: "GET",
                    url: "results/result_html.php?usn="+txt+counter+"&resultType="+resultType,
                    dataType:"JSON",
                    success:function(result){
                        $("#info").hide();
                        $("#result").html(result);              
                        $("#usn").attr("placeholder", "Class USN");
                        alert("hai");
                    }
                });
            })(i);
        }
    });
});

这应该可以解决你的问题。

Ajax程序没有像我预期的那样运行

3 个答案: