3

Ajaxをループで実行して、データを1つずつフェッチしたいと思います。私はjavascript関数でこのようなことをしました。

var resultType = $("input[name='resultType']:checked").val();
var finalResult = "";
var loadingMessage = "<img src=\"./results/loader.gif\" alt=\"Loading...\"/><br/>This may take several minutes...";
var htmlMessage=loadingMessage;

$("#result").html(htmlMessage);

for(var i=1;i<5;i++){
    $.ajax({
        type: "GET",
        url: "results/result_html.php?usn="+i+"&resultType="+resultType,
        dataType:"JSON",
        success:function(result){
            finalResult+=result;
            result=result+htmlMessage;
            $("#info").hide();
            $("#result").html(result);              
            $("#usn").attr("placeholder", "Class USN");
        }
    });
}

しかし、期待どおりに実行されていません。forループを削除して直接値を指定すると、すべてが適切になります。私はAjaxにあまり詳しくありません。誰か助けてもらえますか？

4

2 に答える 2

2

クロージャーに関する一般的な問題に取り組んでいます。ajaxリクエストが実行されるまでに、カウンター「i」はすでに最後の値（4）になっています。

それが起こらないように、そのカウンターの新しいスコープを作成する必要があります。あなたは2つの方法でそれを行うことができます：

簡単な方法：

for(var i=1;i<5;i++){
    var counter = i;
    $.ajax({
        type: "GET",
        url: "results/result_html.php?usn="+counter+"&resultType="+resultType,
        dataType:"JSON",
        success:function(result){
            finalResult+=result;
            result=result+htmlMessage;
            $("#info").hide();
            $("#result").html(result);              
            $("#usn").attr("placeholder", "Class USN");
        }
    });
}

または正しい方法：

for(var i=1;i<5;i++){
(function(counter){
    $.ajax({
        type: "GET",
        url: "results/result_html.php?usn="+"counter"+"&resultType="+resultType,
        dataType:"JSON",
        success:function(result){
            finalResult+=result;
            result=result+htmlMessage;
            $("#info").hide();
            $("#result").html(result);              
            $("#usn").attr("placeholder", "Class USN");
        }
    });
})(i);}
于 2013-02-26T14:42:07.070 に答える
2

このコードではクロージャに問題はありません。あなたが達成しようとしていることは、シーケンシャルロードを強制することと関係があると私は信じています。現在提案している方法では、すべてのajax呼び出しが「並行して」発行されます。この問題は、ajax呼び出しの非同期性に依存しています。

リクエストを「シーケンシャル化」する場合は、次のようにすることができます。

var resultType =$("input[name='resultType']:checked").val();
var finalResult="";
var loadingMessage="<img src=\"./results/loader.gif\" alt=\"Loading...\"/><br/>This may   take several minutes...";
var htmlMessage=loadingMessage;
$("#result").html(htmlMessage);

var i = 1;

function loadNext(){
    if (i < 5){
        $.ajax({
            type: "GET",
            url: "results/result_html.php?usn="+i+"&resultType="+resultType,
            dataType:"JSON",
            success:function(result){
                finalResult+=result;
                result=result+htmlMessage;
                $("#info").hide();
                $("#result").html(result);              
                $("#usn").attr("placeholder", "Class USN");
                loadNext();
            }
        });
        i++;
    }
}
于 2013-02-26T14:52:49.017 に答える