javascript – jQuery验证和AJAX提交表单如何编写e.preventDefault();

您好我正在使用带有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>

解决方法:

您可以单独绑定提交事件,因为在表单有效之前不会发生

$("#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你找不到关于这个的信息……

javascript – jQuery验证和AJAX提交表单如何编写e.preventDefault();

相关推荐