Question

我有一个Ajax代码，如下面的

$(document).ready(function () {
    var galname,URL,count,images,cur;
    $.ajax({
        url: "../Home/Gallery",
        success: function (data) {
            $(data).find("#galcontent p").each(function () {
                galname=$(this).html();
                URL = "../Home/Show?foldername=" + galname;
                alert(URL);
                $.ajax({
                    url: URL,
                    success: function (data) {
                    alert("find");
                    }
                });

            });
        }

    });

});

实际上我希望输出像第一个警报URL，然后转到下一个ajax循环并提醒Find，然后是Next URL等等。但是在这个循环中它的第一个警告所有URL然后转到下一个ajax循环（仅在最后一个第二个ajax循环工作之后。

Answer 1

为了顺序执行ajax调用，您需要将后续的ajax调用作为前一个的成功。你可以通过多种方式实现这一目标。其中之一是递归地执行此操作：

var galname,URL,count,images,cur,content;

function moreAjax(i) {
    if (i === content.length) return;
    else {
        galname=$(this).html();
        URL = "../Home/Show?foldername=" + galname;
        alert(URL);
        $.ajax({
            url: URL,
            success: function(data) {
                alert("find");
                moreAjax(i + 1);   
            } 
        });
    }
}

$(document).ready(function () {
    $.ajax({
        url: "../Home/Gallery",
        success: function (data) {
            content = $(data).find("#galcontent p");
            moreAjax(0);
        }    
    });
});

我没有测试过这段代码，JS不是我的母语，但我相信这种方法应该有用。

Answer 2

据我了解，您的问题是您希望以串行方式运行AJAX调用，而不是并行运行。

在这里，我正在使用jQuery的.then方法（伪）递归地为数组中的每个元素递归调用内部loop函数：

function processData(data) {

    // get the URLs from the original AJAX download
    var URLs = $(data).find('#galcontent p').map(function() {
        return '../Home/Show?foldername=' + $(this).text(); // NB: not .html()
    }).get();

    // IIFE, processes one element from the array in turn
    (function loop() {
        var url = URLs.shift();
        if (url) {
            alert(url);
            $.ajax({ url: url }, success: function() {
                alert("find");
            }).then(loop);  // recurse here
        }
    })();
}

然后上面的函数可以作为.then回调传递给第一个AJAX调用：

$(document).ready(function () {
    $.ajax({
        url: "../Home/Gallery",
    }).then(processData);
});

多个循环，ajax无法正常工作

2 个答案: