ajax登录

最新推荐文章于 2021-08-05 22:56:05 发布

江呱呱

最新推荐文章于 2021-08-05 22:56:05 发布

阅读量140

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108663216

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

ajax登录

1.html端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 600px;
            height: 200px;
            border: 2px solid #ccc;
            margin: 100px auto;
        }
        
        .item {
            display: flex;
            height: 50px;
            align-items: center;
        }
        
        .item label {
            flex: 2;
            text-align: right;
            padding-right: 20px;
            box-sizing: border-box;
        }
        
        .item input {
            flex: 5;
        }
        
        .item span {
            flex: 1;
            text-align: center;
            font-weight: bold;
        }
        
        .submit {
            text-align: center;
        }
        
        .submit button {
            width: 150px;
            height: 30px;
            background-color: pink;
            border-color: pink;
            color: white;
        }
        
        .loading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%);
            display: none;
        }
    </style>
</head>

<body>
    <form>
        <div class="item">
            <label>用户名</label>
            <input id="username" name="username">
            <span id="usernameTips"></span>
        </div>
        <div class="item">
            <label>密码</label>
            <input id="password" name="password">
            <span id="passwordTips"></span>
        </div>
        <div class="item"> <input type="checkbox" name="" id="remember">记住密码</div>
        <div class="submit">
            <button type="button" id="submitBtn">登录</button>
        </div>
    </form>
    <div id="loading" class="loading"><img src="./images/timg.gif" alt=""></div>
    <script src="QF.js"></script>
    <script>
        //获取元素
        var remember = document.getElementById("remember");
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        var submitBtn = document.getElementById("submitBtn");

        //获取localStorage中存储的username和password和remember的值
        var localUsername = localStorage.getItem("username");
        var localPassword = localStorage.getItem("password");
        var localRemember = localStorage.getItem("remember");
        // console.log(localRemember);

        //当从localStorage获得的值不为空的时候  就将这两个值放入表单中
        if (localUsername != "") {
            console.log("我把账号加进去了");
            // console.log(localUsername);
            username.value = localUsername;
        }
        if (localPassword != "") {
            console.log("我把密码加进去了");
            // console.log(1);
            // console.log(localPassword);
            password.value = localPassword;
        }
        //当localStorage获得的remember的值为真的时候  把钩打上
        if (localRemember == "true") {
            console.log("我把钩选上了");
            remember.checked = true
        }


        //当点击提交的时候
        submitBtn.onclick = function() {
            //获得两个输入框的值
            var usernameValue = username.value;
            var passwordValue = password.value;
            console.log(usernameValue, passwordValue);
            //当账号或者密码有一个值为空的时候
            // console.log(usernameValue, passwordValue);
            if (usernameValue === '' || passwordValue === '') {
                alert('请输入正确的账号密码');
                // console.log("进入");
                return;
            }

            //发送ajax请求
            QF.post('http://localhost/day2(http)/login.php', {
                username: usernameValue,
                password: passwordValue
            }, function(data) {
                //转化为json数据格式
                var obj = JSON.parse(data);
                console.log(obj);
                // console.log(data.msg);
                //当存在这个账户的时候
                if (!obj.error) {
                    // console.log(data.error);
                    if (remember.checked) {
                        // console.log(1);
                        // alert(1);
                        localStorage.setItem("remember", "true")
                        localStorage.setItem("username", usernameValue);
                        localStorage.setItem("password", passwordValue);
                    }
                    //当勾选框的值为空的时候  清空localStorage中的值  并将勾选框的值设置为空
                    if (remember.checked == false) {
                        // console.log(1);
                        localStorage.removeItem('username');
                        localStorage.removeItem('password');
                        localStorage.removeItem('remember');
                    };
                    //设置cookie
                    QF.setCookie("username", usernameValue, 100000);
                    // document.cookie = 'username=' + usernameValue;
                    // var obj = JSON.parse(data);
                    alert(obj.msg);
                    setTimeout(function() {
                        location.href = 'http://localhost/day2(http)/index.html'
                    }, 2000)
                } else {
                    alert("密码或者账号错误")
                }
            });
        };
    </script>
</body>

</html>

2.服务端代码

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

    //连接数据库
    mysql_connect('localhost','root','root');
    //选择数据库
    mysql_select_db('gz2006');
    //sql语句
    $sql="SELECT * FROM user WHERE username='$username' AND password='$password'";
    //执行sql语句
    $result=mysql_query($sql);
    //得到选择出来的数据库数据
    $row=mysql_fetch_array($result);
    $arr=array();
    array_push($arr,$row);
    if($row){
        echo json_encode(array('error'=>0,'msg'=>'登录成功，正在跳转'));
    }else{
        echo json_encode(array('error'=>1,'msg'=>'没有找到账号'));
    }
?>

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax登录

ajax登录1.html端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫

专栏目录