如何根据ajax响应提交表单和停止提交表单答案

【问题标题】：how to submit form and stop submit form based on ajax response如何根据ajax响应提交表单和停止提交表单
【发布时间】：2017-09-02 20:40:19
【问题描述】：

我正在使用带有 onsubmit 标记的表单。在 onsubmit 函数中，我将调用 ajax，我将在成功函数中返回 true，在错误部分返回 false。但总是表单已提交。

html

<form action="/" method="post" onsubmit="return formsubmit()">

脚本

function formsubmit() {
"use strict";
var isBasic = $(".test").val() //this is hidden element
if (isBasic === "true") {      
    return true;
}
if (isBasic === "false") {      
        $.ajax({
            type: "post",
            url: "/",
            data: "sample",
            success: function (data) {
                if (data.success) {
                    return true;
                }
                if (!data.success) {                      
                    return false;
                }
            },
            error: function () {

            }
        });
    }
}

}

这对我不起作用。始终提交表单。请帮我解决这个问题。

【问题讨论】：

您在哪里提交表单？
请弹琴？
只使用url: "/", data: "sample",async:true，虽然这是一个不好的方法，因为它会停止页面
How do I return the response from an asynchronous call?的可能重复
在所有情况下都从 formsubmit() 返回 false，然后在您的 ajax 响应中调用 $("#form").submit() 而不是 return true;

标签： jquery ajax

【解决方案1】：

function formsubmit() {
    "use strict";
    var isBasic = $(".test").val() //this is hidden element
    if (isBasic === "true") {      
        return true;
    }
    if (isBasic === "false" && !$(this).attr('submit-suggest')) {      
            $.ajax({
                type: "post",
                url: "/",
                data: "sample",
                success: function (data) {
                    if (data.success) {
                        $(this).attr('submit-suggest',1);
                        $(this).submit();
                    }
                    if (!data.success) {                      
                        $(this).attr('submit-suggest',0);
                    }
                },
                error: function () {
                    $(this).attr('submit-suggest',0);
                }
            });
        return false;
    }
    return true;
}

【讨论】：

【解决方案2】：

像这样改变你的代码。

function formsubmit() {
 "use strict";
 var isBasic = $(".test").val(); //this is hidden element

  if (isBasic === "false") {      
      $.ajax({
         type: "post",
         url: "/",
         data: "sample",
         success: function (data) {
            if (data.success) {
                return true;
            }
            if (!data.success) {                      
                return false;
            }
        },
        error: function () {

        }
    });
}else{
  return true;
}
 return false;
}
}

【讨论】：

【解决方案3】：

您希望从“formsubmit”函数返回值是正确的，但您不能从异步调用返回（ajax 调用是异步的）。

重构您的代码以捕获按钮单击而不是响应表单提交。在按钮单击事件中执行您的 ajax 调用，将回调函数传递给 ajax 调用。在回调函数中决定是否提交表单。

【讨论】：