登录失败时不刷新 - Don't refresh when login fail

我正在为我的作业创建一个网站，我希望在输入错误的密码和用户名组合后页面不会刷新。

我同时使用PHP和javascript，我不使用MYSQL来存储登录信息

这是我的PHP脚本

<?php
if (isset($_POST['login']) && !empty($_POST['username']) 
&& !empty($_POST['password'])) {
    if ($_POST['username'] == 'admin' && 
    $_POST['password'] == 'admin') {
    $_SESSION['username'] = 'admin';
    header ('Location: mainPage.php');
    }else {
        /*What should I include here? */
    }
}?>

这是我的Javascript代码

<script>function pasuser(form) {
if (form.username.value=="admin") { 
    if (form.password.value=="admin") {              
    }
    else {
    document.getElementById("loginFail").innerHTML = '<div class="w3-container w3-section w3-red"> <span onclick="this.parentElement.style.display=''none''" class="w3-closebtn">×</span><h3>WRONG PASSWORD</h3><p>You need to enter the correct password.</p></div>';
    }
}
else{
    document.getElementById("loginFail").innerHTML = '<div class="w3-container w3-section w3-red"> <span onclick="this.parentElement.style.display=''none''" class="w3-closebtn">×</span><h3>WRONG USERNAME</h3><p>You need to enter the correct username.</p></div>';
}</script>

和形式

<html><form class="w3-container w3-card-8 w3-margin-16" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
        <h2 class="w3-text-blue">LOGIN PAGE</h2>
        <p>      
        <label class="w3-text-blue"><b>Username</b></label>
        <input class="w3-input" name="username" type="text" placeholder="Enter your username here"></p>
        <p>      
        <label class="w3-text-blue"><b>Password</b></label>
        <input class="w3-input" name="password" type="password" placeholder="Enter your password here"></p>
        <p>      
        <button type='submit' class="w3-btn w3-blue" type="button" name="login" value="LOGIN" onclick="pasuser(form)">LOGIN</button></p>
        <span id="loginFail">
    </form></html>

基本上我想要显示 W3 的 javascript 函数。CSS 卡在登录不成功时发出警报，而无需重新加载页面。如果页面自行重新加载，卡将消失

由于您没有使用 jQuery，因此以下是本机代码：

function pasuser(){
var request = new Request('login.php',{
    method: 'POST',
    body: new FormData( document.getElementById('form') ), //set id='form' to your <form> element
    mode: 'same-origin',
    redirect: 'manual',
    headers: new Headers({ 'Content-type': 'application/x-www-form-urlencoded' });
});
fetch(request).then(function(response){
   if(response.message == "success"){
       alert("Login Info correct!"); 
        window.location.href="home.php" // For eg.
       //Do redirect or whatever.
   }else if(response.message == "error"){
       document.querySelector('#loginFail').innerHTML = "Login Info Incorrect!"; //display error message
   }
})
}

并将您的 php 分成不同的登录.php文件。不要使用PHP_SELF。它容易受到 XSS 攻击。

login.php

<?php
    if (isset($_POST['login']) && !empty($_POST['username']) && !empty($_POST['password'])) {
    if ($_POST['username'] == 'admin' && $_POST['password'] == 'admin') {
    $_SESSION['username'] = 'admin';
    $res = array("message"=>"success");
    header("Content-type: application/json");
    echo (json_encode($res));
    }else {
        $res = array("message"=>"error");
        header("Content-type: application/json");
        echo(json_encode($res));
    }
  }
?>