Ajax submitHandler 未执行答案

【问题标题】：Ajax submitHandler not executingAjax submitHandler 未执行
【发布时间】：2016-08-17 13:25:46
【问题描述】：

我希望 php 文件通过 ajax 执行，但它只是像正常一样通过表单发布并加载新页面。我在这里检查了一堆代码，但它仍然不能通过 submitHandler 和 ajax 执行。我已经检查了主机提供程序并且支持 ajax，并且我已经使用 jquery 进行了其他测试，它工作正常。只是无法让它发挥应有的作用。 php文件完美执行并将数据插入数据库，所以我猜我在验证代码中遗漏了一些东西。

$("#emailForm").validate({

   submitHandler: function(form) {
//       event.preventDefault();
     $.ajax({
       url: $(form).attr("action"),
       type: $(form).attr("method"),
       data: $(form).serialize(),
       success: function(response) {
         document.getElementById("fee").style.display = "block";
       }
     });
     return false;
   }
 });

#fee {
  display: none;
}

<html>

<head>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

</head>

<body>
  <div class="screen">

    <div class="contents">
      <form class="cmxform" id="emailForm" method="post" action="process.php">
        <fieldset>
          <legend>Sign up now and secure your username!
          </legend>
          <p>
            <label for="cname">Username (required, at least 5 characters)
            </label>
            <input id="cname" name="name" minlength="5" type="text" required>
          </p>
          <p>
            <label for="cpassword">Password (required, at least 8 characters)
            </label>
            <input id="cpassword" name="password" minlength="8" type="password" required>
          </p>
          <p>
            <label for="cemail">Email (required)
            </label>
            <input id="cemail" type="email" name="email" required>
          </p>
          <p>
          </p>
          <p>
            <input class="submit" type="submit" value="Submit">
          </p>
        </fieldset>
      </form>
      <div id='fee'>Signup Complete!
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

1) 你确定你的 javascript 正在执行吗？ 2）您是否检查过控制台是否有错误？ 3) 我没有看到您阻止表单提交的位置 (e.preventDefault())
哦！我必须防止违约？我会谷歌它:)
@JasonP 我更新了我的 javascript 但它仍然在新页面中加载，我正确使用 preventDefault？
@JasonP 我意识到添加 event.preventDefault();不需要返回 false；阻止默认提交。但它仍会加载到新页面中。我没有控制台错误，并且 .validate 工作正常，因此必须执行 javascript。
在您的编辑中，event 不存在。您需要将它作为参数传递给 submithandler 函数。你在哪里做return false？以html的形式？如果存在，则该表单不应在正常的整页帖子中提交。

标签： jquery ajax validation

【解决方案1】：

尝试一下，因为使用表单对象我不确定它是 Javascript DOM 对象还是 jQuery 对象，所以我将对象转换为 jQuery 对象并使用 attr() 方法。

$(document).ready(function () {
$("#emailForm").validate({

   submitHandler: function(form) {
     $.ajax({
       url: $(form).attr("action"),
       type: $(form).attr("method"),
       data: $(form).serialize(),
       success: function(response) {
         document.getElementById("fee").style.display = "block";
       }
     });
     return false;
   }
 });
 });

【讨论】：

这也会在新页面中加载 php，不过谢谢！
我有。 @JasonP 有道理，我没有阻止默认设置，但我不是 100% 如何做到这一点，因为它不在任何示例中。
好的，我知道添加 return false;阻止默认表单提交。但它仍然是。
添加了 $(document).ready(function () { });回答以使其正确。