时间戳

首页 > 解决方案 > 识别 AJAX 请求

javascript - 识别 AJAX 请求

问题描述

我在一个循环中触发多个 AJAX 请求。它们并行运行，尚不清楚哪个将首先响应。如果响应成功，我可以通过分析响应来识别请求。

for (kk = 0; kk < $('#style').val().length; kk++){
    $.ajax({
        type: "POST",
        url: "/single",
        data: {style: [$('#style').val()[kk]]},
        success: function (results) {
            if (results.status == 'success'){
                $('#results').find('div').each(function(){
                    if ($(this).attr('id') == results.style){
                        $(this).empty().append(results.payload)
                    }
                });
            }
            else{
                $('#results').find('div').each(function(){
                    if ($(this).attr('id') == results.style){
                        $(this).empty().append('<b>' + results.style + ':</b> ' + results.payload)
                    }
                });
            }
        },
        error: function (error) {

            console.log(error);
        }
    });
}

但是，有时，请求会失败并触发错误。对于正确的错误处理，我想知道错误属于哪个（先前触发的）请求。

是否有一种干净的方法可以识别特定的 AJAX 请求？

标签： javascriptjqueryajax

解决方案

我建议通过contextAJAX 调用传递一个标识符，您可以在successorerror方法中使用它：

for (kk = 0; kk < $('#style').val().length; kk++){
    $.ajax({
        type: "POST",
        url: "/single",
        data: {style: [$('#style').val()[kk]]},
        // data inside "context" will be available as part of "this" in the success/error case. 
        context: {
          "kk": kk
        },
        success: function (results) {
            if (results.status == 'success'){
                console.log("Element " + this.kk + " finished successfully.");
                $('#results').find('div').each(function(){
                    if ($(this).attr('id') == results.style){
                        $(this).empty().append(results.payload)
                    }
                });
            }
            else{
                $('#results').find('div').each(function(){
                    if ($(this).attr('id') == results.style){
                        $(this).empty().append('<b>' + results.style + ':</b> ' + results.payload)
                    }
                });
            }
        },
        error: function (error) {
            console.log("Element " + this.kk + "failed.");
            console.log(error);
        }
    });
}

更多信息context可以在jQuery 文档中找到。

关于您关于检查多少次呼叫失败/成功的评论：这里是一个JsFiddle，演示了如何跟踪呼叫统计信息。

推荐阅读