执行ajax同步POST然后提交表单的正确方法答案

【问题标题】：correct way to perform an ajax synchronous POST and then submit form执行ajax同步POST然后提交表单的正确方法
【发布时间】：2016-03-22 18:03:32
【问题描述】：

我有我的 ASP 提交按钮

<asp:button runat="server" Text="Submit" id="btnSubmitOrder" OnClientClick="return SubmitOrder()" />

我的 Javascript 函数 SubmitOrder() 需要执行一个 POST，然后根据该 POST 的成功，要么允许表单提交（返回 true），要么取消它（返回 false）

function SubmitOrder() {

    $.ajax({
        async: false,
        type: 'POST',
        url: strURL,
        data: arrKeyVal,
        contentType: 'application/json',
        success: function (data) {
            if (data.results.count > 0) {
                return true;
            } else {
                return false;
            }
        },
        error: function (jqXHR, exception) {
            return false;
        }
    });

}

我担心的是，由于现在已弃用，它可能很快就会过时。

主线程上的同步 XMLHttpRequest 已被弃用，因为其对最终用户体验的不利影响。如需更多帮助，检查https://xhr.spec.whatwg.org/。

那么我应该如何处理呢？知道我需要等待回复才能继续提交表单。

【问题讨论】：

为什么需要async: false？
@RayonDabre 我不相信我可以从异步回调函数中取消表单提交。
你没有考虑event.preventDefault(); 吗？
如果问题是您需要在成功的ajax函数中执行表单提交，只需将回调作为函数参数传递，以便在执行帖子后调用它。同时，提供一个甜蜜的加载东西，让用户在浏览器没有被锁定的情况下保持娱乐，就像同步请求一样。（或者如果成功就提交表单）
@adam : 是的，但是......只是不要使用同步请求，这就是我的重点:)

标签： javascript jquery ajax

【解决方案1】：

您只能同步取消事件。一种选择是不将 SubmitOrder 附加到表单提交事件，而只是创建一个单击处理程序，然后在您的 ajax 回调中实际提交表单。

function SubmitOrder() {

    $.ajax({
        async: false,
        type: 'POST',
        url: strURL,
        data: arrKeyVal,
        contentType: 'application/json',
        success: function (data) {
            if (data.results.count > 0) {
                $('form').submit();
            }
        }
    });
}

...或者您可以执行表单的 Ajax 提交，而不是常规的 HTML 表单提交。

【讨论】：

我非常喜欢这个想法，会尝试并报告。谢谢！

【解决方案2】：

function SubmitOrder() {
    event.preventDefault();
    $.ajax({
        context: this,
        type: 'POST',
        url: strURL,
        data: arrKeyVal,
        contentType: 'application/json',
        success: function (data) {
            if (data.results.count > 0) {
                $('form').submit();
            } else {
                return false;
            }
        },
        error: function (jqXHR, exception) {
            return false;
        }
    });
}

编辑：此函数尚未引用表单，因此您需要选择表单然后调用提交。

【讨论】：

不会this.submit() 再打电话给SubmitOrder 吗？
你在哪里声明变量event？