如何在PHP中使用Ajax使用警报消息框而不需要页面刷新

How to use alert message box using Ajax in PHP without page refresh?

本文关键字:不需要 刷新 消息 PHP Ajax      更新时间:2023-09-26

我有我的PHP代码在这里与设计和它的后端过程。当用户输入数据时,当'createpassword'和'confirmpassword'不匹配时,使用Ajax使用提示消息的正确语法是什么?

我尝试使用JavaScript类型的警告框,但是每当用户输入密码时,它都会刷新表单。我希望它只显示一个警告框,而不刷新页面。有人有什么想法吗?

这是我的PHP设计:

<?php
    $MonthArray = array(
        1=>"January",
        2=> "February",
        3=> "March",
        4=> "April",
        5=> "May",
        6=> "June",
        7=> "July",
        8=> "August",
        9=> "September",
        10=> "October",
        11=> "November",
        12=> "December",
    );
?>
<!DOCTYPE html>
<html>
<head>
    <title>Sign up</title>
</head>
<body>
    <div id="container">
        <div id="signup">
            <form action="SignupProcess.php" method="POST">
                <!-- Complete Name -->
                <div class="Name">
                    <label><span style="font-weight:bold">Name</span></label>
                    <br>
                    <input type="text" name="firstname" size="15" placeholder="First" required>
                    <input type="text" name="lastname" size="15" placeholder="Last" required>
                </div>
                <br>
                <!-- Username -->
                <div class="Username">
                    <label><span style="font-weight:bold">Choose your username</span></label><br>
                    <input type="text" name="username" size="35" required>
                </div>
                <br>
                <!-- Password -->
                <div class="Password">
                    <label><span style="font-weight:bold">Create a password</span></label><br>
                    <input type="password" name="createpassword" size="35" required>
                    <br><br>
                    <label><span style="font-weight:bold">Confirm your password</span></label><br>
                    <input type="password" name="confirmpassword" size="35" required>
                </div>
                <br>
                <!-- Birthdate -->
                <div class="Birthdate">
                    <select name="month" required>
                        <option disabled selected>Month</option>
                        <?php foreach($MonthArray as $monthkey => $value) { ?>
                            <option value="<?php echo $monthkey ?>"><?php echo $value ?></option>
                        <?php }?>
                    </select>
                    <input type="text" name="day" placeholder="Day" size="5" required>
                    <select name="year" required>
                        <?php
                            foreach(range(1990, (int)date("Y")) as $year) {
                                echo "'t<option value='".$year."'>".$year."</option>'n'r";
                                rsort($year);
                            }
                        ?>
                    </select>
                </div>
                <!-- Buttons -->
                <div class="Buttons">
                    <input type="submit" id="signup" name="signupsubmit">
                    <input type="reset" id="reset" name="signupreset">
                </div>
            </form>
        </div>
    </div>
</body>
</html>

及其PHP进程:

<?php
    include("CreateConnection.php");
    // Get values from form Signup.php file
    $FirstName = mysqli_real_escape_string($connect, $_POST['firstname']);
    $LastName = mysqli_real_escape_string($connect, $_POST['lastname']);
    $Username = mysqli_real_escape_string($connect, $_POST['username']);
    $CreatePassword = mysqli_real_escape_string($connect, $_POST['createpassword']);
    $ConfirmPassword = mysqli_real_escape_string($connect, $_POST['confirmpassword']);
    $Month = mysqli_real_escape_string($connect, $_POST['month']);
    $Day = mysqli_real_escape_string($connect, $_POST['day']);
    $Year = mysqli_real_escape_string($connect, $_POST['year']);
    // Removes back slashes in input
    $FirstName = stripcslashes($FirstName);
    $LastName = stripcslashes($LastName);
    $Username = stripcslashes($Username);
    $CreatePassword = stripcslashes($CreatePassword);
    $ConfirmPassword = stripcslashes($ConfirmPassword);
    $Month = stripcslashes($Month);
    $Day = stripcslashes($Day);
    $Year = stripcslashes($Year);
    if($CreatePassword != $ConfirmPassword)
    {
        echo "<script type='text/javascript'>alert('Password does not match please check.');</script> ";
        echo "<script>setTimeout('"location.href = 'Signup.php''", 0)</script>";
    }
    else
    {
        // Query Insert into tablereminders
        $query = mysqli_query($connect, "INSERT INTO `tablereminders`(`username`, `password`, `firstname`, `lastname`, `Month`, `Day`, `Year`)
        VALUES ('$Username','$ConfirmPassword','$FirstName','$LastName','$Month','$Day','$Year')");
    }
    // Error connection and query
    if(mysqli_query($connect, $query))
    {
        echo "New record created successfully";
        echo "<script>setTimeout('"location.href = 'LoginReminder.php''", 500)</script>";
    }
?>

我将在这里的代码中显示一个不刷新页面的警告框。

if($CreatePassword != $ConfirmPassword)
{
    echo "<script type='text/javascript'>alert('Password does not match please check.');</script> ";
    echo "<script>setTimeout('"location.href = 'Signup.php''", 0)</script>";
}

我想把一个Ajax请求在我的SignupProcess.php。可以在外部调用表单函数吗?

您可以简单地使用这样的JavaScript代码来进行验证:

<?php
    $MonthArray = array(
        1 => "January",
        2 => "February",
        3 => "March",
        4 => "April",
        5 => "May",
        6 => "June",
        7 => "July",
        8 => "August",
        9 => "September",
        10 => "October",
        11 => "November",
        12 => "December",
    );
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Sign up</title>
        <script type="text/javascript">
            function validate_form() {
                var createpass = document.getElementById("createpassword").value;
                var confirmpass = document.getElementById("confirmpassword").value;
                if (createpass != confirmpass) {
                    alert("Password does not match please check.");
                    document.getElementById("createpassword").focus();
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="signup">
                <form action="SignupProcess.php" method="POST" onsubmit="return validate_form();">
                    <!-- Complete Name -->
                    <div class="Name">
                        <label><span style="font-weight:bold">Name</span></label>
                        <br>
                        <input type="text" name="firstname" size="15" placeholder="First" required>
                        <input type="text" name="lastname" size="15" placeholder="Last" required>
                    </div>
                    <br>
                    <!-- Username -->
                    <div class="Username">
                        <label><span style="font-weight:bold">Choose your username</span></label><br>
                        <input type="text" name="username" size="35" required>
                    </div>
                    <br>
                    <!-- Password -->
                    <div class="Password">
                        <label><span style="font-weight:bold">Create a password</span></label><br>
                        <input type="password" name="createpassword"  id="createpassword" size="35" required>
                        <br><br>
                        <label><span style="font-weight:bold">Confirm your password</span></label><br>
                        <input type="password" name="confirmpassword" id="confirmpassword" size="35" required>
                    </div>
                    <br>
                    <!-- Birthdate -->
                    <div class="Birthdate">
                        <select name="month" required>
                            <option disabled selected>Month</option>
                            <?php foreach ($MonthArray as $monthkey => $value) { ?>
                                <option value="<?php echo $monthkey ?>"><?php echo $value ?></option>
                            <?php } ?>
                        </select>
                        <input type="text" name="day" placeholder="Day" size="5" required>
                        <select name="year" required>
                            <?php
                            foreach (range(1990, (int) date("Y")) as $year) {
                                echo "'t<option value='" . $year . "'>" . $year . "</option>'n'r";
                                rsort($year);
                            }
                            ?>
                        </select>
                    </div>
                    <!-- Buttons -->
                    <div class="Buttons">
                        <input type="submit" id="signup" name="signupsubmit">
                        <input type="reset" id="reset" name="signupreset">
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

我已经添加了id属性到您的两个密码字段,然后添加onsubmit="return validate_form();"功能在您的表单标签。

可以看到在head标签中添加了一个JavaScript函数。

让我知道它是否适合你