博主信息
lilove的博客
博文
100
粉丝
8
评论
2
访问量
53657
积分:2
P豆:744.5

ajax提交用户登陆验证(数据库查询验证)

2020年09月06日 23:34:35阅读数:152博客 / lilove的博客/ 12期

前端登录页面代码

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Ajax:FormData案例</title></head><style>    * {        margin: 0;        padding: 0;        box-sizing: content-box;    }    fieldset {        max-width: 200px;        color: coral;        margin: 20px auto;        padding: 20px;    }    input {        margin-bottom: 10px;    }    button {        width: 80px;        height: 30px;        background-color: darkorange;        border: none;    }    button:hover {        color: midnightblue;        background-color: lightgreen;    }    button:active {        background-color: darkorange;    }</style><body>    <form action="" method="POST" onsubmit="return false">        <fieldset>            <legend>登陆</legend>            <label for="username">用户名</label><br>            <input type="text" name="username" id="username" required><br>            <label for="password">密码</label><br>            <input type="password" name="password" id="password" required autofocus><br>            <button>提交数据</button>        </fieldset>    </form>    <p></p></body><script>    // 1.获取DOM    var form = document.querySelector("form");    var btn = document.querySelector("form button");    // 2.按键绑定事件    btn.onclick = function () {        // 2.1.创建ajax对象        var xhr = new XMLHttpRequest();        // 2.2.监听请求        xhr.onreadystatechange = function () {            if (xhr.readyState === 4 && xhr.status === 200) {                // 请求成功返回的数据保存在responseText属性中                var res = JSON.parse(xhr.responseText);                console.log(res);                // 根据后端返回状态判断                switch (res.status) {                    case 0:                    case 1:                        error = res.message;                        break;                    default:                        error = '未知错误';                }                // 将错误信息渲染到页面中                var span = document.createElement("span");                span.innerHTML = error;                form.appendChild(span);            }        }        // 3.初始化请求参数:open(请求类型, 请求的地址URL, 是否异步),默认是异步        xhr.open("POST", "demo.php");        // 4.使用表单对象:FormData组织数据        var data = new FormData(form);        // 5.发送请求,以json格式发送数据        xhr.send(data);    }</script></html>

后端php页面代码(查询数据库验证)

<?php// 加载数据库连接require "db.php";// 接收数据$username = $_POST['username'] ?? null;$password = sha1($_POST['password']) ?? null;// 查询数据$select = "SELECT * FROM `user` WHERE `user_name`=:username AND `password`=:pwd";$data = $pdo->prepare($select);$data->bindParam(':username', $username);$data->bindParam(':pwd', $password);$data->execute();$data->fetch();// 默认返回信息为0$status = 0;// 一般由前端处理html样式,后端只传数据$message = '<span style="color:red">邮箱或密码错误</span>';// 如果查询到匹配的用户,则返回通过信息if ($data->rowCount() == 1) {    $status = 1;    $message = '<span style="color:green">验证通过</span>';}// 将返回信息转成json字符串echo json_encode(['status' => $status, 'message' => $message]);

  • 运行效果:

批改状态:未批改

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 这篇文章主要介绍了AJAX+JAVA注册的实现代码,通过ajax异步刷新页面输入的账号密码是否在中存在。
    需要本地的PHPMYADMIN连接远程的MYSQL,打开config.inc.php,更改方式:找$cfg['Servers'][$i]['auth_type'],其值改为 cookie
    Ajax的工作原理相当于在和服务器之间加了—个中间层,使操作与服务器响应异步化,并不是所有的请求都给服务器,像—些处理等都Ajax引擎自己来做。
    一个PHP+Ajax实现文章心情投票功能实例,可以学习了解实现投票的基本流程:通过ajax获取心情图标及柱状图相关,当点击其中的一个心情图标时,向Ajax.php发送请求,PHPcookie