javascript - Ajax异步响应未加载到div中

Question

这就是困扰我的事情。我的代码正在 document.ready 上运行。我需要异步请求，这意味着 async: true

for (var i = 0; i < totalGraphs; i++) {
    var kpiId = kpiIds[i];
    jQuery.ajax({
        type: 'POST',
        url: graphUrl,
        data: "kpiId="+kpiId+"&divId="+(i+1),
        async: true, //if false things are working fine
        cache:false,
        success: function(response){
            document.getDocumentById("graph" + (i + 1)).innerHTML("hello");
        },
        error:function(XMLHttpRequest, textStatus, errorThrown) {
        }
    });
}

此请求不会将 hello 放入我的 graphX div 中，但每当我放入 async: false 时，一切都会正常工作。我确实需要异步请求。

预先感谢您的帮助。

Answer 1

试试这个...

for (var i = 0; i < totalGraphs; i++){
    (function ajaxCall(index) {
        var kpiId = kpiIds[index];
        jQuery.ajax({
            type: "POST",
            url: graphUrl,
            data: {
                kpiId : kpiId,
                divId : index + 1
            },
            async: true, //if false things are working fine
            cache: false,
            success: function(response) {
                document.getDocumentById("graph" + (index + 1)).innerHTML("hello");
            },
            error: function(XMLHttpRequest,textStatus,errorThrown) {}
        });
    })(i);
}

我将 ajax 调用包装在一个匿名函数中，这样 i 的值相对于 ajax 调用永远不会改变。