login.html

<form action="./login.php">
        账号：<input type="text" name="user1"><span></span>
        <br/>
        密码：<input type="text" name="pass1"><span></span>
        <br/>
        <button>登录</button>
    </form>

<script src="../ajax.js"></script>
    <script src="../cookie.js"></script>
    <script>
        //获取操作对象
        var frm=document.querySelector('form')
        var u1=document.querySelector('[name="user1"]')
        var p1=document.querySelector('[name="pass1"]')

        //给form表单绑定提交事件
        frm.onsubmit=function(){
           
            //获取输入框中的value值
            var username=u1.value
            var password=p1.value
            //调用ajax方法判断是否登录成功
            ajax({
                url:'./login.php',
                data:`u2=${username}&p2=${password}`,
                success:function(dt){
                    //判断返回值是多少
                    //建议使用2个等号==去验证，而不是===，因为可能在后台写1的时候会不小心多一个空格之类的
                    if(dt=='1'){
                        //设置cookie
                        setCookie("name",username)
                        location.href="./list.html"
                    }else{
                        alert("登录失败")
                    }
                }
            })
            //阻止表单的自动提交行为（阻止默认行为），才能使用ajax去传参
            return false;
        }
    </script>

 login.php

<?php
header("content-type:text/html;charset=utf-8");
//获取传入的参数
$u=$_GET['u2'];
$p=$_GET["p2"];

//连接数据库
$link=mysqli_connect("localhost",'root','','shop2');
//设置编码
mysqli_set_charset($link,"utf8");
//SQL语句
$sql="select * from user where name='$u' and pass='$p'";
//执行SQL语句
$result=mysqli_query($link,$sql);
//获取结果集中第一条数据
$row=mysqli_fetch_assoc($result);
//判断当前$row是否有值
if($row){
    echo "1";
}else{
    echo "0";
}
//关闭数据库连接
mysqli_close($link);

?>

list.html

<h1>用户：<span></span>，早上好！今天又是美好的一天</h1>

 

<script src="./cookie.js"></script>
    <script>
        //获取操作对象
        var span=document.querySelector("span")
        //获取cookie
        var name1=getCookie("name")
        //判断cookie是否存在
        if(name1){
            span.innerHTML=name1
        }else{
            alert("非法进入")
            location.href="./login.html"
        }
    </script>

AJAX函数封装

function ajax(obj){
    //ajax()：方法名
    //obj：参数集
    //默认参数
    var defaultObj={
        url:'',//请求地址
        type:'get',//请求方式
        async:true,//是否异步（表示异步，是默认值）
        data:'',//请求参数
        success:function(){},//请求成功的回调函数
        error:function(){} //请求失败的回调函数
    }
    //判断传入的参数中是否有请求地址
    if(!obj.url){
        throw new Error("必须书写请求地址")
    }
    //把传入的参数替换默认参数
    for(var attr in obj){
        //arr：传入的参数集obj里面的每一个参数
        defaultObj[attr]=obj[attr]
    }

    //创建ajax对象
    var xhr=new XMLHttpRequest()
    //判断当前defaultObj.data中是否存在内容
    if(defaultObj.data){
        //判断请求方式  toUpperCase：转换为大写，因为不确定用户书写的请求方式是大写还是小写，所有最好把传过来的type参数值转换大写
        if(defaultObj.type.toUpperCase()=="GET"){
            //配置请求信息
            xhr.open(defaultObj.type,defaultObj.url+"?"+defaultObj.data,defaultObj.async)
            //发送请求
            xhr.send()
        }else if(defaultObj.type.toUpperCase()=="POST"){
            //配置请求信息
            xhr.open(defaultObj.type,defaultObj.url,defaultObj.async)
            //设置请求头信息 告诉一下服务端我给你的是一个什么样子的数据格式
            //`application/x-www-form-urlencoded` 表示的数据格式就是 `key=value&key=value`
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
            //发送请求
            xhr.send(defaultObj.data)
        }
    }else{
        //配置请求信息
        xhr.open(defaultObj.type,defaultObj.url,defaultObj.async)
        //发送请求
        xhr.send()
    }

    //操作响应结果
    //监听ajax状态是否结束
    xhr.onreadystatechange=function(){
        //判断ajax状态是否结束
        if(xhr.readyState==4){
            //判断http请求是否成功
            if(xhr.status==200){
                //调用成功的回调函数
                defaultObj.success(xhr.responseText)
            }else{
                //调用失败的回调函数
                defaultObj.error(xhr.error)
            }
        }
    }
}

cookie函数封装

//根据键名，获取指定的键值
function getCookie(key){
    //获取所有的cookie
    var cookies=document.cookie
    //使用分割的方式，把字符串转为数组
    var ar1=cookies.split("; ")
    //遍历分割好的数组元素
    for(var i=0;i<ar1.length;i++){
        //分割遍历出来的数组元素
        var ar2=ar1[i].split('=')
        //判断当前分割出来的键名是否等于传入的键名
        if(ar2[0]==key){
            return ar2[1]
        }
    }
}
//设置cookie
function setCookie(key,val,time1=0){
    //判断当前time1是否等于0
    if(time1==0){
        document.cookie=`${key}=${val}`
    }else{
        //获取当前北京时间
        var dt1=new Date()
        //获取当前世界时间
        var time2=dt1-8*3600*1000+time1*1000
        //添加cookie
        document.cookie=`${key}=${val};expires=${new Date(time2)}`
    }
}

//删除cookie
function delCookie(key){
    setCookie(key,'',-1)
}