前端登陆案例php

　　index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>login</h1>
    <button><a href="./login.html">go to login</a></button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <h3 style="display:none;">login failed</h3>
        username: <input type="text" name="username" autocomplete="off"><br>
        password: <input type="text" name="password" autocomplete="off"><br>
        <button>submitf</button>
    </form>
    <script>
        const username=document.querySelector('input[name=username]')
        const password=document.querySelector('input[name=password]')
        const form=document.querySelector('form')
        const h3=document.querySelector('h3')
        
        form.addEventListener('submit',e=>{
            e.preventDefault()
            if(!username.value || !password.value) return alert('form incomplete')
            const xhr=new XMLHttpRequest()
            xhr.open('POST','./login.php')
            xhr.onload=function(){
                
                const {message,code}=JSON.parse(xhr.responseText)
                console.log(message,code)
                if(code===0){
                    window.location.href='./index.html'
                }else if(code!==0){
                    h3.style.display='block'
                }
            }
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.send(`username=${username.value}&password=${password.value}`)
        })
    </script>
</body>
</html>

<?php
    $username=$_POST['username'];
    $password=$_POST['password'];

    $link=mysqli_connect('localhost','root','cruces','abate');
    $sql="select * from users where username='$username' and password='$password'";
    $result=mysqli_query($link,$sql);
    $data=mysqli_fetch_all($result);

    if(count($data)){
        session_start();
        // $_SESSION['login']=1;
        // $_SESSION['username']=$data[0]['username'];
        $arr=array(
            "message"=>"success",
            "code"=>0
        );
    }else{
        $arr=array(
            "message"=>"failed",
            "code"=>1
        );
    }

    echo json_encode($arr);

?>