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--;
}

Jquery实时附加多个PHP响应

1 个答案: