识别AJAX请求 [英] Identifying AJAX request

问题描述

我正在循环触发多个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请求?

解决方案

我建议通过context将标识符传递给AJAX调用，您可以在success或error方法中使用该标识符:

 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 展示了如何跟踪通话统计信息.

I am triggering multiple AJAX requests in a loop. They run in parallel and it is not clear which one will respond first. If the response is successful, I can identify the request by analyzing the response.

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);
        }
    });
}

However, once in a while, the request fails and an error is triggered. For a proper error handling, I would like to know to which of the (previously triggered) requests the error belongs.

Is there a clean method how a specific AJAX request can be identified?

解决方案

I would recommend to pass in a identifier via context to the AJAX call which you can use inside the success or error methods:

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);
        }
    });
}

More information regarding context can be found in the jQuery documentation.

Regarding your comment about checking how many calls failed / succeeded: here is a JsFiddle demonstrating how to keep track of the call statistics.

这篇关于识别AJAX请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！