Jquery Ajax beforeSend 和成功，错误 &完全的 [英] Jquery Ajax beforeSend and success,error & complete

问题描述

我有多个 ajax 函数的问题，其中 second ajax post 的 beforeSend 在 complete 函数之前执行 >首先 ajax.

I have a problem with multiple ajax functions where the beforeSend of the second ajax post is executed before the complete function of the first ajax.

我在发送之前添加到占位符的加载类适用于第一个 ajax 调用.然而，在第一个 ajax 请求完成后不久，该类就会被删除，并且不会在第二次和进一步的调用中再次追加(记住递归调用).

The loading class I am adding to the placeholder 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).

调试时发现是先调用了第二个ajax调用的beforeSend函数，后调用了第一个ajax调用的complete函数.这很明显，因为从第一个ajax调用插入页面的返回数据启动了第二个调用.

While debugging it shows that the beforeSend function of the second ajax call 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 the first ajax call starts the second call.

简而言之，它被混淆了.有什么办法可以解决这个问题吗?

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

功能代码如下

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

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

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

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

推荐答案

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

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

这样的话，如果在complete语句之前调用beforeSend语句，i就会大于0，所以不会删除类.那么只有最后一次调用才能删除它.

This way, if the beforeSend statement is called before the complete statement i will be greater than 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 not.

这篇关于Jquery Ajax beforeSend 和成功，错误 &完全的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！