jQuery验证和AJAX提交表单如何编写e.preventDefault（）;

Hello I'm using AJAX submit form with jQuery Validate.

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

The problem is e.preventDefault(); I don't know how to write it in this case.

问题是e.preventDefault();在这种情况下我不知道如何写它。

The problem is : It will submit form twice via common method and AJAX method that lead to insert MySQL twice.

问题是:它将通过常用方法和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>

1 个解决方案

#1

You can bind the submit event separately, as it won't happen until the form is valid

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

$("#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.
        }
     });
});

Interesting that in the docs you can't find info about this...

有趣的是,在文档中你找不到关于这个的信息......

#1