jQuery validate 和 AJAX 提交表单如何编写 e.preventDefault();答案

【问题标题】：jQuery validate and AJAX submit form how to write e.preventDefault();jQuery validate 和 AJAX 提交表单如何编写 e.preventDefault();
【发布时间】：2017-01-11 14:39:54
【问题描述】：

您好，我正在使用带有 jQuery Validate 的 AJAX 提交表单。

问题是e.preventDefault();这种情况我不知道怎么写。

问题是：它会通过普通方法和AJAX方法提交两次表单，导致两次插入MySQL。

<?php 
$servername = "localhost";
$username = "root";
$password = "1234";
$dbname = "test";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if ($_POST) {
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $sql = "INSERT INTO test (firstname, lastname) VALUES ('$firstname', '$lastname')";
    mysqli_query($conn, $sql);
    mysqli_close($conn);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>
</head>
<body>
<div id="kuy"> </div>
<div id="lastname"></div>
    <form id="myform" action="this_page.php" method="post">
        Firstname : <input type="text" name="firstname" required> <br>
        Lastname : <input type="text" name="lastname" required> <br>
        <input type="submit" value="Submit">
    </form>

    <script>
        $("#myform").validate({
          rules: {
            // simple rule, converted to {required:true}
            firstname: "required",
            // compound rule
            lastname: {
              required: true,
              email: true
            }
          },
          submitHandler: function(form) {
            $.ajax({
                type : "POST",
                url : 'this_page.php',
                //dataType : 'json', // Notice json here
                data : $(form).serialize(), // serializes the form's elements.
                success : function (data) {
                   alert('success'); // show response from the php script.

                }
            });

            form.preventDefault();
          }
        });
    </script>
</body>
</html>

【问题讨论】：

form.preventDefault();
可以看看 validates.js 文档...

标签： javascript php jquery html ajax

【解决方案1】：

您可以单独绑定submit 事件，因为它在表单有效之前不会发生

$("#myform").validate({
   rules: {
   // simple rule, converted to {required:true}
   firstname: "required",
   // compound rule
   lastname: {
      required: true,
      email: true
   }
}).on('submit', function(e) {
     e.preventDefault();
     var $form = $(this);
     $.ajax({
        type : "POST",
        url : 'this_page.php',
        //dataType : 'json', // Notice json here
        data : $form.serialize(), // serializes the form's elements.
        success : function (data, response) {
            alert(response); // show response from the php script.
        }
     });
});

有趣的是，在 docs 中您找不到有关此的信息...

【讨论】：