javascript - 此 AJAX 调用代码中缺少什么？

Question

我很抱歉没有提供上下文的完整代码，我对此很陌生。这是 signup.php 文件的代码：

<?php
    session_start();
    include('connection.php');
    
    $missingUsername='<p><strong>Please enter a username</strong></p>';
    $missingEmail='<p><strong>Please enter your email address</strong></p>';
    $InvalidEmail='<p><strong>Please enter a valid email address</strong></p>';
    $missingPassword='<p><strong>Please enter a password</strong></p>';
    $InvalidPassword='<p><strong>Your password should be at least 6 characters long and include one capital letter and one number</strong></p>';
    $differentPassword='<p><strong>Passwords don\'t match</strong></p>';
    $missingPassword2='<p><strong>Please confirm your password</strong></p>';
    
    if(empty($_POST["username"])){
        $errors .= $missingUsername;
    }else{
        $username = filter_var($_POST["username"], FILTER_SANITIZE_STRING);
    }
    
    if(empty($_POST["email"])){
        $errors .= $missingEmail;
    }else{
        $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
        if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
           $errors .= $InvalidEmail; 
        }
    }
    
    if(empty($_POST["password"])){
        $errors .= $missingPassword;
    }elseif(!(strlen($_POST["password"])>6 and preg_match('/[A-Z]/',$_POST["password"]) and preg_match('/[0-9]/',$_POST["password"]))){
        $errors .= $InvalidPassword;
    }else{
        $password = filter_var($_POST["password"], FILTER_SANITIZE_STRING);
        if(empty($_POST["password2"])){
            $errors .= $missingPassword2;
        }else{
            $password2 = filter_var($_POST["password2"], FILTER_SANITIZE_STRING);
            if($password !== $password2){
                $errors .= $differentPassword;
            }
        }
    }
    
    if($errors){
        $resultMessage = '<div class="alert alert-danger">' . $errors .'</div>'
            echo $resultMessage;
    }
    
    $username = mysqli_real_escape_string($link, $username);
    $email = mysqli_real_escape_string($link, $email);
    $password = mysqli_real_escape_string($link, $password);
    
    $password = hash('sha256', $password);
    $sql = "SELECT * FROM users WHERE username = '$username'";
    $result = mysqli_query($link, $sql);
    if(!$result){
        echo '<div class="alert alert-danger">Error running the query!</div>';
        exit;
    }
    $results = mysqli_num_rows($result);
    if($results){
        echo '<div class="alert alert-danger">That username is already registered. Do you want to log in?</div>';
        exit;
    }
    $sql = "SELECT * FROM users WHERE email = '$email'";
    $result = mysqli_query($link, $sql);
    if(!$result){
        echo '<div class="alert alert-danger">Error running the query!</div>';
        exit;
    }
    $results = mysqli_num_rows($result);
    if($results){
        echo '<div class="alert alert-danger">That email is already registered. Do you want to log in?</div>';
        exit;
    }
    
    $activationKey = bin2hex(openssl_random_pseudo_bytes(16));
       
    $sql = "INSERT INTO users ('username', 'email', 'password', 'activation') VALUES ('$username', '$email', '$password', '$activationKey')";
    $result = mysqli_query($link, $sql);
    if(!$result){
        echo '<div class="alert alert-danger">There was an error inserting the user details in the database!</div>';
        exit;
    }
    
    $message = "Please click on this link to activate your account:\n\n";
    $message .= "http://studenttest.host20.uk/activate.php?email=" . urlencode($email) . "&key=$activationKey";
    if(mail($email, 'Confirm your Registration', $message, 'From:'.'[e-mail]')){
        echo "<div class='alert alert-success'>Thank you for registration! Confirmation email has been sent to $email. Please click on the activation link to activate your account.</div>";
    }
?>

这里又是我正在使用的 JS 代码块，其广泛的目标是制作正确的注册表单：

$("#signupform").submit(function(event){
    event.preventDefault();
    var datatopost = $(this).serializeArray();
    console.log(datatopost);
    $.ajax({
        url: "signup.php",
        type: "POST",
        data: datatopost,
        success: function(data){
            if(data){
                $("#signupmessage").html(data);
            }
        },
        error: function(){
            $("#signupmessage").html("<div class='alert alert-danger'>There was an error with the Ajax call. Please try again later.</div>");
        }
    });
});

出于某种原因，我不断收到 AJAX 错误，而不是我为用户名输入、密码输入等设置的典型错误消息。它链接到正确的文件（放在我的主 index.php 文件中的脚本标记中）和与其他一切。

会发生什么？

标签： javascriptphpajax

Answer 1

您的 signup.php 页面中可能有错误，因此最好将整个代码放入以便找到问题并修复它。

我用与你的代码几乎相同的代码做了一个小例子，它工作正常：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >


<div id="signupmessage"></div>

<form id="signupform" action="" method="POST">
    <input type="text" name="firstname" placeholder="Enter your first name" /><br /><br />
    <input type="text" name="lastname" placeholder="Enter your last name" /><br /><br />
    <input type="submit" value="submit">
</form>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type='text/javascript'>
    $("#signupform").submit(function(event){
        event.preventDefault();
        var datatopost = $(this).serializeArray();
        console.log(datatopost);
        $.ajax({
            url: "signup.php",
            type: "POST",
            data: datatopost,
            success: function(data){
                    $("#signupmessage").html(data);
            },
            error: function(data){
                $("#signupmessage").html(data);
            }
        });
    });
</script>

--------- 注册.php ------------

<?php

    if(isset($_POST['firstname']) && isset($_POST['lastname'])){
        
        $firstname = $_POST['firstname'];
        $lastname = $_POST['lastname'];

        
        echo $firstname."<br />";
        echo $lastname;

    }
     else{
         echo "<div class='alert alert-danger'>There was an error with the Ajax call. Please try again later.</div>";
    }
    
?>