javascript - 如何在不需要刷新页面的情况下进行验证？

Question

我对编程很陌生，我当前的登录表单是index.php

<form action="login.php" method="post" name="form1">
    <div class="form-group">
        <div class="form-label-group">
            <input type="text" id="inputEmail" class="form-control"  name="username" placeholder="Username" required="required" autofocus="autofocus">
            <label for="inputEmail">Username</label>
        </div>
    </div>
    <div class="form-group">
        <div class="form-label-group">
            <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required="required">
            <label for="inputPassword">Password</label>
        </div>
    </div>
    <input type="submit" class="btn btn-primary btn-block" name="login" value="Login">
</form>

login.php 是

<?php
include "connect.php";

if(!isset($_POST['username']) || !isset($_POST['password']))
    die("<script>alert('Incorrect Username or Password!')</script>
         <script>window.open('index.php','_self')</script>");
echo "<script>alert('Incorrect Username or Password!');</script>
                 <script>window.open('login.php','_self');</script>";

    $UN = $_POST['username'];
    $PW = $_POST['password'];

if(strlen($UN)==0 || strlen($PW)==0)
    die("<script>alert('Username or Password cannot be empty!')</script>
         <script>window.open('index.php','_self')</script>"); 
//data selection

$sql = "SELECT * FROM accounts WHERE Username='".$UN."' AND Password='".$PW."'";
$result = mysqli_query($con,$sql);
if ($rows = mysqli_fetch_array($result)) {
    if ($rows['userType'] == "admin") {
        session_start();
        $_SESSION['login_admin']= $UN;
        header("location:home.php");
    }else{
        session_start();
        $_SESSION['login_user']= $UN;
        header("location:home-user.php");
    }
}else{
    die("Log in Failed: Invalid Username or Password.<br />".
            "<a href=\"index.php\">Try Again?</a>");
}
?>

我怎样才能在我的表单中实现login.php以使其不刷新？ 因此，当我的密码不正确时，我当前的程序会刷新

 <script>window.open('index.php','_self')</script>");

我不想刷新，而是想使用 toast 通知用户用户名/密码不正确

Answer 1

根据 Jay 的评论，您将需要 AJAX 和 PHP 文件来处理您的请求。 (Javascript/jQuery)

阅读 $.ajax()

包含位于 jQuery 的 jQuery 库在 JavaScript 代码之前的 head 部分:只需确保将 jQuery 库命名为与 src 相同的名称即可。

<script src="jquery.js"></script>

此后您可以运行 AJAX。 AJAX 请求与服务器端的 php 文件进行对话。您可以向其发送项目并接收返回的项目，通常通过在 php 文件中使用 echo 来实现。有关附加/可选信息，请阅读 PHP(数组和 json_encode())，它将向您的 AJAX 请求发送 json 编码数组，并阅读 jQuery(JSON.parse())以在浏览器端处理此编码数组.

AJAX 请求如下所示:

<script type="text/javascript">
    $.ajax({
        url: "phpFile.php",
        data: {
            myPost : 'value of post'
        },
        success: function(data) {
            alert(data);
        }
    });
</script>