1

基本的に、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 ブロックが完全に処理されています。何か不足していますか？

4

1 に答える 1

2

を削除する必要があります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--;
}

さて、考えられる問題がもう 1 つあります。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--;
}
于 2013-11-01T18:52:33.493 に答える