jQuery实时追加多个PHP响应

Question

基本上，我希望Jquery函数多次调用PHP脚本，并且每次将响应加载到div中，这是我现在拥有的代码：

images = 10;
while(images > 0)
    {
        $.ajax({        
            type: "POST",
            url: "processimage.php",
            data: { image : 1 },
            async: false,
            success: function(data) {   
                $( "#logger" ).append(data+ '<br />');
            }
        });
        images--;
    }

这段代码正在处理所有图像，然后附加完整的响应，但是我希望它为每个图像附加响应。 在更新#logger div之前，将以某种方式完全处理while块。 我想念什么吗？

Answer 1

您必须删除async: false 。 依次允许请求完成并在完成时追加。 但是，您将意识到它们是无序附加的！ 为了解决这个问题，我们可以使用Promise对象和.then。

images = 10;

var req = $.ajax({
    type: "POST",
    url: "processimage.php",
    data: {
        image: images
    },
    success: function (data) {
        $("#logger").append(data + '<br />');
    }
});
images--;

while (images > 0) {
    req.then(function(){
        return $.ajax({
            type: "POST",
            url: "processimage.php",
            data: {
                image: 1
            },
            success: function (data) {
                $("#logger").append(data + '<br />');
            }
        });
    });
    images--;
}

现在，仍然存在另一个可能的问题。 如果您需要随每个请求传递images的当前值，则前一个代码将在第一个请求之后发送所有请求，并发送最后一个images值。 为了解决这个问题，我们可以使用iffe。

images = 10;

var req = $.ajax({
    type: "POST",
    url: "processimage.php",
    data: {
        image: 1
    },
    success: function (data) {
        $("#logger").append(data + '<br />');
    }
});
images--;

while (images > 0) {
    (function(i){
        req.then(function(){
            return $.ajax({
                type: "POST",
                url: "processimage.php",
                data: {
                    image: i
                },
                success: function (data) {
                    $("#logger").append(data + '<br />');
                }
            });
        });
    })(images);
    images--;
}

然后，可以通过将选项存储在单独的变量中，按照以下建议将其设置为DRYer：

images = 10;

var ajaxOpts = {
    type: "POST",
    url: "processimage.php",
    data: {
        image: 1
    },
    success: function (data) {
        $("#logger").append(data + '<br />');
    }
};

var req = $.ajax(ajaxOpts);
images--;

while (images > 0) {
    (function(i){
        req.then(function(){
            ajaxOpts.data.image = i;
            return $.ajax(ajaxOpts);
        });
    })(images);
    images--;
}