使用jQuery发生ajax请求，做一个注册登录功能！(本期知识：jQuery中的ajax)

前言

今天我们来了解一下登录注册功能
在前端是怎么做的
以及非常非常强大的jQuery

涉及知识点

1.jQuery（官方下载：https://jquery.com/download/）
2.Ajax
3.后端语言PHP（使用PHP连接数据库获取插入前端传入的数据）
4.MySQL-Front数据库（存储前端传入的数据）

完整代码

注册页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>注册</title>
        <style>
            div{
                width: 300px;
                height: 200px;
                background-color: rgb(236, 236, 236);
                overflow: hidden;
                margin: 200px auto;
            }
            span{
                display: block;
                text-align: center;
                vertical-align: middle;
                line-height: 30px;
                padding-top: 10px;
            }
            i{
                font-style: normal;
                margin-left: 130px;
                line-height: 50px;
                font-size: 20px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>
            <i>注册</i>
            <span>
                账号：<input type="text" placeholder="请输入账号" name="username">
                <p></p>
                密码：<input type="password" placeholder="请输入密码" name="password">
                <p></p>
                <input type="submit">
            </span>
        </div>
    </body>
    <script src="./jquery.min.js"></script>
    <script>
        $('input').eq(2).click(function(){
            $.ajax({
                url:'后端插入数据的PHP地址',
                data:{
                    username:$('input').eq(0).val(),
                    password:$('input').eq(1).val()
                },
                success:function(res){
                    if(res.code){
                        location.href="登录页面地址"
                    }    
                },
                dataType:'json'
            })
        })
    </script>
</html>

登录页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录</title>
        <style>
            div{
                width: 300px;
                height: 200px;
                background-color: rgb(236, 236, 236);
                overflow: hidden;
                margin: 200px auto;
            }
            span{
                display: block;
                text-align: center;
                vertical-align: middle;
                line-height: 30px;
                padding-top: 10px;
            }
            i{
                font-style: normal;
                margin-left: 130px;
                line-height: 50px;
                font-size: 20px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>
            <i>登录</i>
            <span>
                账号：<input type="text" placeholder="请输入账号" name="username">
                <p></p>
                密码：<input type="password" placeholder="请输入密码" name="password">
                <p></p>
                <input type="submit">
            </span>
        </div>
    </body>
    <script src="./jquery.min.js"></script>
    <script>
        $('input').eq(2).click(function(){
            $.ajax({
                url:'后端查询数据的PHP地址',
                data:{
                    username:$('input').eq(0).val(),
                    password:$('input').eq(1).val()
                },
                success:function(res){
                    if(res.code){
                        location.href="登录成功的页面地址"
                    }    
                },
                dataType:'json'
            })
        })
    </script>
</html>