ajax 登录功能简单实现(未连接数据库)

下面是对应的详细讲解。

一、概述

本文将介绍如何使用 Ajax 实现登录功能，包括从前端发送请求，后端接收请求，进行登录校验，并返回结果。由于本文不涉及和数据库的交互，所以没有进行真实的登录校验，只是简单地判断用户名和密码是否正确。

二、前端页面

我们需要一个登录页面，该页面包括输入用户名和密码的输入框，以及一个登录按钮。在输入框失去焦点时校验输入的用户名和密码格式是否正确。当点击登录按钮时，使用 Ajax 发送登录请求到后端服务器。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 登录功能</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="loginForm">
        <div>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </div>
        <button type="submit" id="loginBtn">登录</button>
    </form>
    <script>
        $(function() {
            // 当用户名和密码框失去焦点时，校验输入是否合法
            $("#username, #password").blur(function() {
                var reg = /^[a-zA-Z]\w{5,17}$/;
                var val = $(this).val();
                if (!reg.test(val)) {
                    alert('请输入正确格式的用户名和密码');
                    $(this).focus();
                }
            });

            // 当登录按钮被点击时，发送 Ajax 请求
            $("#loginBtn").click(function(event) {
                event.preventDefault();

                var username = $("#username").val();
                var password = $("#password").val();
                if (!username || !password) {
                    alert('请输入用户名和密码');
                    return;
                }

                $.ajax({
                    url: './login.php',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        username: username,
                        password: password
                    },
                    success: function(res) {
                        if (res.code === 0) {
                            alert('登录成功');
                        } else {
                            alert('登录失败');
                        }
                    },
                    error: function() {
                        alert('请求失败，请稍后重试');
                    }
                });
            });
        });
    </script>
</body>
</html>

三、后端处理

后端接收到前端发送的请求，检验用户名和密码是否正确。如果正确，则返回 Json 格式的数据，告诉前端登录成功。如果错误，则返回告诉前端登录失败。

示例代码如下：

<?php
header('Content-Type: application/json');

$username = $_POST['username'];
$password = $_POST['password'];
if ($username === 'admin' && $password === '123456') {
    echo json_encode(array('code' => 0, 'msg' => '登录成功'));
} else {
    echo json_encode(array('code' => 1, 'msg' => '用户名或密码错误'));
}

四、完成效果

由于我们只是简单地校验了用户名和密码，所以无论输入什么用户名和密码，都会提示登录成功。如果要进行真实的登录判断，需要和数据库进行交互判断用户名和密码是否正确。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ajax 登录功能简单实现(未连接数据库) - Python技术站

ajax 登录功能简单实现(未连接数据库)

一、概述

二、前端页面

三、后端处理

四、完成效果

相关文章