javascript 提交表单，即使 return false

Question

我有一个带有外部 URL 方法 post

的动作的表单

<form name="myform" id="myform" action="externalurl.com" mehtod="post">
</form>

在页面底部，我有如下所示的 javascript 标记和表单提交我有一个通过 Ajax 在控制器中对 JsonResult 进行的调用。

<script type='text/javascript'>

$('form#myform').submit(function () {
    var FirstName = $("#FirstName").val();
    var LastName = $("#LastName").val();

    $.ajax({
        type: "POST",
        url: "/umbraco/Surface/CheckoutMain/RegisterUser?FirstName=" + FirstName + "&LastName=" + LastName,
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            debugger
            if (response == "Yes") {
                return true;
            }
            else if (response == "RequiredFields") {
                alert("Please make sure all required fields are filled in.")
                return false;
            }
            else if (response == "No") {
                alert(response + "Please contact us!");
                return false;
            }
        }
    })
});
</script>

我只是不确定为什么它在我 return 对 ajax 调用的响应之前提交。

我做错了什么吗？

这里还有我控制器中的代码：

[HttpPost]
    public JsonResult RegisterUser(string FirstName, string LastName)
    {
        if (FirstName == "" || LastName == "" )
        {
            return Json("RequiredFields", JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json("Yes", JsonRequestBehavior.AllowGet);
        }
        return Json("No", JsonRequestBehavior.AllowGet);
    }

此外，如果我 return 不，它仍然会 post 如果我在上面的代码中放置一个断点并逐步执行，我可以看到该站点已经重定向到外部 URL。（我希望这是有道理的）。

如果有人有任何建议，我将不胜感激。

Answer 1

您的 $.ajax 是异步的，因此 success 处理程序 returns 的任何内容都将被忽略；到那时，submit 处理程序函数将完成（并将返回 undefined，而不是 false）。

因为等到response返回后才知道是否可以提交表单，所以应该return false regardless，然后，如果response是OK，手动提交表单，否则不提交表单（只显示错误）：

$('#myform').submit(function() {
  var FirstName = $("#FirstName").val();
  var LastName = $("#LastName").val();
  $.ajax({
    type: "POST",
    url: "/umbraco/Surface/CheckoutMain/RegisterUser?FirstName=" + FirstName + "&LastName=" + LastName,
    dataType: "json",
    contentType: "application/json;charset=utf-8",
    success: (response) => {
      if (response == "Yes") {
        this.submit();
      } else if (response == "RequiredFields") {
        alert("Please make sure all required fields are filled in.")
      } else if (response == "No") {
        alert(response + "Please contact us!");
      }
    }
  });
  return false;
});

您可能还会注意到，由于文档中的 ID 是（或 应该是 ）唯一的，请随意使用 ID 选择器 ('#myform')，不还需要加上 form 前缀。

Answer 2

您的表单已提交，因为 HTML 已经导致提交。

您可以使用 event.preventDefault() 来防止这种情况。

...
$('form#myform').submit(function (event) {
  event.preventDefault();
...

javascript 提交表单，即使 return false

javascript submits form even if return false

javascript

ajax

form-submit