0

Ajaxリクエストをループで実行すると、成功時のajaxで返されたデータが表示されません...コードは次のとおりです。

url = ["../siteAdmin/statistics/queriesAjax.php", "../siteAdmin/statistics/geographyAjax.php"];
tabContainerId = ['tabs-2', 'tabs-3'];

for(var i=0, len=url.length; i < len; i++){
    console.log(tabContainerId[i]);
    jQuery("#"+tabContainerId[i]).html('<img src="../assets/images/loading.gif"/>');
    jQuery.ajax({
        type:"GET",
        url:url[i],
        data:{ from:from, to:to },
        success: function (msg) {
            jQuery("#"+tabContainerId[i]).html(msg);
        },
        error: function (msg) {
            showError("Error occurred.", tabContainerId[i]);
        }
    });
}

HTML 要素では、loading.gif だけが表示されます。ブラウザのコンソールに ajax 成功時の Console.log(msg) が表示される。しかし、HTML要素ではそうではありません。i を var i = 0 または var i = 1 に設定すると、データが表示されます。私はどこで間違いを犯しましたか？

4

1 に答える 1

2

成功のコールバック内で変数を使用してiいますが、コールバックが実行されるまでにiは、ほぼ確実に変更されています。

i を強制的にコールバック関数のクロージャーの一部にする必要があります。これを行う 1 つの方法は、for ループの内容をすぐに呼び出される関数式 (IIFE) に入れることです。

url = ["../siteAdmin/statistics/queriesAjax.php", "../siteAdmin/statistics/geographyAjax.php"];
tabContainerId = ['tabs-2', 'tabs-3'];

for(var i=0, len=url.length; i < len; i++) {
    (function(idx) {
        console.log(tabContainerId[idx]);
        jQuery("#"+tabContainerId[idx]).html('<img src="../assets/images/loading.gif"/>');
        jQuery.ajax({
            type:"GET",
            url:url[idx],
            data:{ from:from, to:to },
            success: function (msg) {
                jQuery("#"+tabContainerId[idx]).html(msg);
            },
            error: function (msg) {
                showError("Error occurred.", tabContainerId[idx]);
            }
        });
    })(i);
}

実際には、これは の値を「保存」するiため、コールバック関数が使用する場合と同じになります。

このコードは lint またはインタープリターを介して実行していないため、構文エラーがある可能性があります。

于 2012-10-30T20:28:41.307 に答える