登录-前后端交互

最新推荐文章于 2023-03-16 21:40:39 发布

专家表示

最新推荐文章于 2023-03-16 21:40:39 发布

阅读量867

点赞数 1

分类专栏： javascript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_46534711/article/details/124479703

版权

javascript学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一个简单的登录交互逻辑，部署本地服务器，后端书写语言 PHP；

前端逻辑：

输入用户名和密码
点击登录按钮
发送请求数据
输出返回结果

后端逻辑：

接收前端传递的数据
验证用户名和密码是否正确
把验证结果返回个前端

登录逻辑

<body>
   
    <input class="username" type="text">
    <input class="password" type="text">
    <button>登录</button>

    <script>
        const nameInp = document.querySelector('.username')
        const pwdInp = document.querySelector('.password')
        const btn = document.querySelector('button')

        btn.onclick = function () {
            const name = nameInp.value
            const pwd = pwdInp.value

            if (!name || !pwd) return

            const data = `username=${ name }&password=${ pwd }`

            // 发送请求
            const xhr = new XMLHttpRequest()

            xhr.open('POST', './login.php')

            xhr.onload = function () {
                const res = JSON.parse(xhr.responseText)
                console.log(res)
                alert(res.message)
            }

            // 请求头
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

            xhr.send(data)
        }
    </script>

</body>

后端逻辑

// 1. 如何接受参数
$username = $_POST['username'];
$password = $_POST['password'];

// 2. 验证
$t1 = 'berg';
$t2 = '123456';

if ($username == $t1 && $password == $t2) {
    // 组装正确的数据
    $arr = [
        "message" => "登录成功",
        "code" => 1,
        "username" => $username,
        "password" => $password
    ];
} else {
    // 组装错误的数据
    $arr = [
        "message" => "用户名或密码错误",
        "code" => 0,
        "username" => $username,
        "password" => $password
    ];
}

// 3. 把结果返回个给前端
echo json_encode($arr);