防止在 Ajax 中提交表单答案

【问题标题】：Prevent submitting form in Ajax防止在 Ajax 中提交表单
【发布时间】：2015-09-20 01:20:59
【问题描述】：

我有一个带有

的表格

<form id=myform onsubmit=return validate();>
<input type=text id=name name=name>
</form>

在我的 javascript 文件中

function validate(){
 $.ajax({
        dataType: 'json',
        url: app.url.prefix,
        method: 'POST',
        data: {service: 'manage', met: 1, name: name },
        success: function (data) {
            if (data.exists){
                 return false;
            }

        }

    });
return true;
}

这个Ajax 代码检查返回的数据是否有值，尤其是data.exists。我想阻止基于存在值提交表单。

这个
if (data.exists){ return false; }

确实没用。

【问题讨论】：

100% 确定。如果您在输入处于活动状态时按 Enter，您想阻止表单重新加载页面？
问题是，ajax表示异步操作。因此，您应该阻止提交，并且在收到积极反馈后，您应该在成功函数中提交表单。
我想要 IF data.exists ==（我不想要的）然后不要提交。但我在函数末尾返回 true，因为 AJAX 是异步的，所以它不起作用。

标签： php html ajax form-submit

【解决方案1】：

解决方案：

我更改了我的HTML 并添加了onclick 事件而不是onsubmit

<form id="myform">
   <input type="text" id="name" name="name">
   <button type="submit" id="button" onclick="validate();">
</form>

也在Javascript

我在这里阻止提交

 $("#button").on("click",function(event){
    event.preventDefault();
});

这是我检查数据是否不存在然后提交表单的功能

function validate(){

$.ajax({

 dataType: 'json',
 url: app.url.prefix,
 method: 'POST',
 data: {service: 'manage', met: 1, name: name },
 success: function (data) {
 if (!data.exists){
   $('#myform').submit();
}
 }
  });

【讨论】：

【解决方案2】：

$('#myform').submit(function() {
    return false;
});

这应该可以解决问题，现在表单不会在按下回车键或按钮时重新加载页面。

编辑：
您的表单也缺少双引号

<form id="myform" onsubmit="return validate();">
    <input type="text" id="name" name="name">
</form>

【讨论】：

【解决方案3】：

您的问题是由于异步 ajax 函数调用而发生的，它在 ajax 数据返回之前返回 true。我没查过，不过你可以试试这样的：

function validate(){
var self = this;
self.preventDefault();
 $.ajax({
        dataType: 'json',
        url: app.url.prefix,
        method: 'POST',
        data: {service: 'manage', met: 1, name: name },
        success: function (data) {
            if (!data.exists){
                 self.submit();
            }

        }

    });

返回假； }

【讨论】：