Jquery Ajax预示和成功、错误和完整

I have a problem in ajax function where the beforeSend of second ajax post is executed before the complete: function of the first ajax. The loading class I am adding to the placehorder before sending is working for the first ajax call. However soon after the first ajax request completes the class is removed and never appends again on the second and further calls (remember recursive calls). While debugging it shows that the beforeSend function of the second ajax calls is called first and the complete function of the first ajax call is called later. Which is obvious because the return data inserted in the page from first ajax call starts the second call.

我在ajax函数中有一个问题，在这个函数中，第二个ajax post的前端在完成之前执行:第一个ajax的函数。我在发送之前添加到placehorder的加载类正在处理第一个ajax调用。不过，在第一个ajax请求完成后不久，类就会被删除，并且不会在第二个和进一步的调用上再追加(请记住递归调用)。在调试时，它显示第二次ajax调用的前面函数被调用，第一次ajax调用的完整函数被调用。这很明显，因为从第一个ajax调用插入到页面中的返回数据将启动第二个调用。

In short it's mixed up. Is there any way this can be sorted out?

简而言之，它是混在一起的。有什么办法可以解决这个问题吗?

The function code is as follows

函数代码如下所示

function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // setting a timeout
        $(placeholder).addClass('loading');
    },
    success: function(data) {
        if (append) {
            $(placeholder).append(data);
        } else {
            $(placeholder).html(data);
        }
    },
    error: function(xhr) { // if error occured
        alert("Error occured.please try again");
        $(placeholder).append(xhr.statusText + xhr.responseText);
        $(placeholder).removeClass('loading');
    },
    complete: function() {
        $(placeholder).removeClass('loading');
    },
    dataType: 'html'
});
}

And the data contains the following snippet of javascript/jquery which checks and starts another ajax request.

数据包含以下javascript/jquery代码片段，它们检查并启动另一个ajax请求。

<script type="text/javascript">//<!--
 $(document).ready(function() {
    $('#restart').val(-1)
    $('#ajaxSubmit').click();
});
//--></script>

2 个解决方案

#1

Maybe you can try the following :

也许你可以试试下面的方法:

var i = 0;
function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // setting a timeout
        $(placeholder).addClass('loading');
        i++;
    },
    success: function(data) {
        if (append) {
            $(placeholder).append(data);
        } else {
            $(placeholder).html(data);
        }
    },
    error: function(xhr) { // if error occured
        alert("Error occured.please try again");
        $(placeholder).append(xhr.statusText + xhr.responseText);
        $(placeholder).removeClass('loading');
    },
    complete: function() {
        i--;
        if (i <= 0) {
            $(placeholder).removeClass('loading');
        }
    },
    dataType: 'html'
});
}

This way, if the beforeSend statement if called before the complete statement i will be over 0 so it will not remove the class. Then only the last call will be able to remove it. I cannot test it, let me know if it works or no.

这样，如果在完整语句之前调用了beend语句，那么我将超过0，所以它不会删除类。然后只有最后一个调用才能删除它。我不能测试它，让我知道它是否有效。

#2

It's actually much easier with jQuery's promise API:

jQuery的承诺API实际上更容易实现:

$.ajax(
            type: "GET",
            url: requestURL,
        ).then((success) =>
            console.dir(success)
        ).failure((failureResponse) =>
            console.dir(failureResponse)
        )

Alternatively, you can pass in of bind functions to each result callback; the order of parameters is: (success, failure). So long as you specify a function with at least 1 parameter, you get access to the response. So, for example, if you wanted to check the response text, you could simply do:

或者，您可以将bind函数传递给每个结果回调;参数的顺序是:(成功，失败)。只要您指定一个具有至少一个参数的函数，就可以访问响应。例如，如果你想检查响应文本，你可以简单地做:

$.ajax(
            type: "GET",
            url: @get("url") + "logout",
            beforeSend: (xhr) -> xhr.setRequestHeader("token", currentToken)
        ).failure((response) -> console.log "Request was unauthorized" if response.status is 401

#1