使用JQuery AJAX向PHP提交表单，返回数据为空

Question

当我在下面运行这段代码时，返回的“数据”是一个空字符串“[]”。 （至少通过 Chrome 控制台查看器查看）

如果我注释掉“event.preventDefault();”正如预期的那样，在 JS 中的行中，我得到了一个页面重新加载，以及一个带有通过 JSONLint 的结果的 JSON 字符串。我知道 PHP 正在工作，因为我正在将新插入到 mySQL 数据库中并且返回值是有意义的。

即使“数据”返回为空，一切似乎也能正常运行......（即，我首先得到了 FIRST 的 console.log，第二个是空字符串。）我就是无法得到返回的“ JS 上下文中的数据”值。

我对 Web 开发有点陌生，而不是编程……但是有人发现菜鸟的错误吗？我已经阅读了大约 12 个类似的问题并尝试了很多方法，但没有任何帮助......

提前致谢。

$(document).ready(function() {
    $('form').submit(function(event) {
        var formData = {
            'firstName': $('input[name=firstName]').val(),
            'lastName': $('input[name=lastName]').val(),
            'email': $('input[name=email]').val(),
            'password': $('input[name=password]').val()
        };

        $.ajax({
            type: 'POST',
            url: 'createaccount.php',
            data: formData,
            dataType: 'json'
        })
            .done(function(data) {
                console.log("SECOND");
                console.log(data);
            });
        
        console.log("FIRST");
        event.preventDefault();
    });
});

    input {
        border-radius: 5px;
        border-width: 1px;
        margin: 2px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="col-lg-4"></div>
                <div class="col-lg-4 text-right">
                <h1>Join website</h1>
                    <form action="createaccount.php" method="post">
                        <label>First Name:</label><input type="text" name="firstName" /><br/>
                        <label>Last Name:</label><input type="text" name="lastName" /><br/>
                        <label>Email:</Label><input type="email" name="email" /><br/>
                        <label>Password:</label><input type="password" name="password" /><br/>
                        <input type="submit" value="Sign Up" name="submit" />
                    </form>
                </div>
                <div class="col-lg-4"></div>
            </div>
        </div>

<?php 

    $firstName = $_POST["firstName"];
    $lastName = $_POST["lastName"];
    $email = $_POST["email"];
    $password = $_POST["password"];
    $submit = $_POST["submit"];

    $errors = array();
    $data = array();

    if ($submit) {  
        if (!$email) { 
            $errors['email'] = "Email is required.";
        } 
        else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $errors['validemail'] = "Valid email is required.";
        }
        
        if (!$password) {
            $errors['password'] = "Password is required.";
        } 
        else {
            if (strlen($password) < 8) {
                $errors['passwordlength'] = "Password must be at least 8 characters long";
            }
            if (!preg_match("#[A-Z]+#", $password)) {
                $errors['passwordcaps'] = "Password must contain at least one Capital Letter";
            }
        } 
    
                    
        if (empty($errors)) {
                    
            require 'dbconnect.php';
            
            $query="SELECT * FROM Users WHERE email='".mysqli_real_escape_string($link, $email)."'";
            
            $result = mysqli_query($link, $query);
            
            $results = mysqli_num_rows($result);
                                                                                 
            if ($results) {
                $errors['exists'] = "That email address is already registered.";
            } 
            else {
                $firstName = mysqli_real_escape_string($link, $firstName);
                $lastName = mysqli_real_escape_string($link, $lastName);
                $email = mysqli_real_escape_string($link, $email);
                $password = md5(md5($email).$password);
            
                $query="INSERT INTO `Users` (`FirstName`, `LastName`, `Email`, `Password`, `IsRater`, `IsRatee`) VALUES('$firstName', '$lastName', '$email', '$password', '1', '1');";
            
                if(!mysqli_query($link, $query)) {
                    $errors['SQLQuery'] = "Failed SQL Insert" . mysqli_error($link);
                }
                else
                {
                    $data['success'] = true;
                    $data['message'] = 'Your account has been created!';
                }
            }
        }
        
        if(!empty($errors)) {
            $data['success'] = false;
            $data['errors'] = $errors;
        }
    }

    echo json_encode($data);
?>

Answer 1

PHP 代码在对表单数据进行任何操作之前检查是否设置了$_POST['submit']，但您从未在formData 中设置它。试试：

    var formData = {
        'firstName': $('input[name=firstName]').val(),
        'lastName': $('input[name=lastName]').val(),
        'email': $('input[name=email]').val(),
        'password': $('input[name=password]').val(),
        'submit': 'on'
    };