JQuery防止表单在ajax中提交[重复]

Question

我是 JQuery 和 ajax 的新手，我想在从控制器取回数据后禁用表单提交（我使用的是 Asp.net 核心 MVC）。事情是，即使我取消提交，它仍然提交如下所示：

$("form").submit(function (e) {
                var link = '@Url.Action("Action", "Controller")';
                var args = {
                    arg1: Elem1.val(),
                    arg2: Elem2.val()
                };
                $.ajax({
                    type: "GET",
                    url: link,
                    data: args,
                    dataType: "json",
                    success: function (data) {
                        alert(data.canacess); //Shows False
                        if (data.canacess== true) {
                            AllEnable();
                        }
                        else { //Goes here
                            e.preventDefault(); //Dont do this
                            alert(data.erromessage); //Do this
                        }
                    },
                    error: function () {
                        alert("Error. Kontaktujte správce.");
                        return;
                    }
                });
            });

我认为它必须与 ajax 做一些事情，因为它可以在代码中的任何其他地方工作。

感谢您的帮助！

Answer 1

e.preventDefault() 需要在submit 函数处理程序的范围内调用。现在您正在 AJAX 回调处理程序中调用它，这为时已晚，无法产生任何效果。

在我决定是否提交之前，有什么方法可以阻止提交表单？

是的。为此，您需要始终调用 e.preventDefault() 以停止表单提交，以便您给 AJAX 请求时间来执行并返回响应。然后，根据该响应，您可以直接提交 HTMLFormElement 对象，注意 not jQuery 对象，并将表单数据发送到指定的action。试试这个：

$("form").submit(function(e) {
  e.preventDefault();
  var form = this;

  $.ajax({
    type: "GET",
    url: '@Url.Action("Action", "Controller")',
    data: {
      arg1: Elem1.val(),
      arg2: Elem2.val()
    },
    dataType: "json",
    success: function(data) {
      if (data.canacess) {
        AllEnable();
        form.submit();
      }
    },
    error: function() {
      alert("Error. Kontaktujte správce.");
    }
  });
});

另请注意，在条件中使用布尔值时，将它们与真/假进行比较是多余的。同样，error 处理程序中的 return 是多余的，因为它是函数中的最后一条语句。