识别AJAX请求

Question

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?

Answer 1

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.