Jquery Ajax beforeSend 和成功，错误和完成

IT技术 javascript jquery ajax recursion
2021-03-04 16:38:56

我有其中多个AJAX功能的问题beforeSend的的第二AJAX柱的前执行complete所述的功能的第一AJAX。

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

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

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

功能代码如下

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 请求。

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

也许您可以尝试以下操作： 

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

这样，如果在该beforeSend语句之前调用该complete语句，则该语句i将大于 0，因此不会删除该类。那么只有最后一次调用才能删除它。

我无法测试它，让我知道它是否有效。

我尝试了你的解决方案，它给了我令人惊讶的结果。首先，我在 beforeSend 中使用了 var requestNumber = 0 和 ++ it 并在完整/始终检查它。它显示 requestNumber == 2 和 -- results in 1 在检查中返回 false 并且加载类没有被删除。但是它永远不会被删除，因为我不知道为什么，它正在为整个序列生成一个额外的请求。现在罪魁祸首找到了，我认为很容易解决或发布错误请求。
2021-05-16 16:38:56
如果函数失败，那么它会出错并完成。如果我只想要它完成，我可以在完成return 1结束时让它不出错怎么办？
2021-05-21 16:38:56

使用jQuery 的 promise API实际上要容易得多：

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

或者，您可以将bind函数传递给每个结果回调；参数的顺序是：(success, failure). 只要你指定一个至少有 1 个参数的函数，你就可以访问响应。因此，例如，如果您想检查响应文本，您可以简单地执行以下操作：

$.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
感谢您的更新，我更新了我的代码并用新定义的、Promise的函数失败、完成和始终替换了成功、错误和完整的回调函数。但是他们没有解决问题，因为当我应用@Nathan P 提供的解决方案时，问题有所不同
2021-05-10 16:38:56
其它你可能感兴趣的问题
上一篇google.setOnLoadCallback 和 jQuery $(document).ready()，可以混用吗？ 下一篇Material-ui 从 react-router 添加 Link 组件