AJAX实现登录验证

效果图：

在这里插入图片描述

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>
        用户名：<input type="text" id="un"><br>
        密&nbsp;&nbsp;&nbsp;码：<input type="text" id="pw"><br>
        <input type="button" value="登录" id='login'>
    </form>
    <h1 id='result'></h1>
    <script>
        // 获取相关元素
        var lgBtn = document.getElementById('login');//登录按钮
        var unInp = document.getElementById('un');//用户名输入框
        var pwInp = document.getElementById('pw');//密码输入框
        // 用户点击登录按钮
        lgBtn.onclick = function(){
     
     
            var uname = unInp.value;//用户名
            var pw = pwInp.value;//密码
            // 把用户填写的用户名和密码提交给后端15login.php
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 配置请求信息
            xhr.open('GET','./15login.php?username='+uname+'&password='+pw);
            // 接受响应
            xhr.onload = function(){
     
     
                // 等待后端响应，如果结果是1表示登录成功，如果结果是0表示登录失败  
                console.log(xhr.responseText);//是一个字符串
                if(xhr.responseText=="1"){
     
     
                    document.getElementById('result').innerHTML = "登录成功"
                }else{
     
     
                    document.getElementById('result').innerHTML = "登录失败，请重来"
                }
            }
            // 发送请求
            xhr.send()
                     
        }
        
    </script>
</body>
</html>

PHP文件

<?php
    // 0 接受前端传递的用户信息
    $name = $_GET['username'];//用户名
    $pass = $_GET['password'];//密码

    // 定义几个数据库信息
    $host = '127.0.0.1';
    $username = 'root';
    $password = 'root';
    $db = 'student';
    // 0 处理中文乱码
    header('content-type:text/html;charset=utf-8;');
    // 1 建立数据库链接
    $conn = mysqli_connect($host,$username,$password,$db);

    // 2 执行查询的sql语句
    $sql = "SELECT * FROM `userinfo` WHERE `username`='$name' AND `password`='$pass'";
    $res = mysqli_query($conn,$sql);

    // 3 解析单行数据结果
    $row = mysqli_fetch_assoc($res); //没有查询结果里面没有符合条件的数据，单行解析结果是null
    // var_dump($row);

    if($row){
    
    
        // 如果登录成功，告诉前端登录成功（也可以尝试设置cookie）
        echo 1;        
    }else{
    
    
        // 如果登录失败，告诉前端登录失败
        echo 0;
    }

    // 4 断开链接
    mysqli_close($conn);
?>

效果图：

HTML文件

PHP文件

猜你喜欢