ajax表单验证_PHP中文网手记

摘要：获取按钮元素并创建点击事件。创建一个监听对象，如果监听对象的状态返回值是4表示请求已经完成并响应就绪，再判断一下如果返回的值是200说明查询成功。然后新建一个p标签用于输出查询状态。var json = JSON.parse(xhr.responseText);是把从服务器发送过来的信息转换成js格式。如果查询的信息返回值是1说明查询到了对应的信息直接输出之前设定好的值，反之则依然。然后把登录信息

获取按钮元素并创建点击事件。
创建一个监听对象，如果监听对象的状态返回值是4表示请求已经完成并响应就绪，再判断一下如果返回的值是200说明查询成功。然后新建一个p标签用于输出查询状态。var json = JSON.parse(xhr.responseText);是把从服务器发送过来的信息转换成js格式。如果查询的信息返回值是1说明查询到了对应的信息直接输出之前设定好的值，反之则依然。然后把登录信息用刚才的p标签发送到页面上再禁用按钮功能，设置定时器对页面进行重定位跳转。
设置请求方式为post，后台路径是include下的check.php文件，由于发送的是form表单请求，所以表单头要修改一下xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
把需要发送验证对象的value值以字面量形式赋值给data，然后把data以json方式转换一下数据赋值给data_json,由于直接发送的data_json数据没有下标，下面的data就是加上下标进行发送方便查询
xhr.send('data='+data_json);
database.php配置一下数据库的信息
在check.php里载入数据库信息文件并赋值给$db，使用PDO方式连接数据库，使用json_decode($_POST['data'])方法接收post发送过来的数据并赋值给user，实例化并赋值邮箱和密码字段并进行数据库查询。
如果查询到的数据==1说明结果为真，那么就echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
输出到前端页面，前端页面接收到数据后跳转指定的admin.php页面。

总结写代码过程中的错误：前台页面如果使用的是div而不是form，并且js里使用的是div而不是forms的话查询是没有任何响应的，并且在验证的php页面里不能有输出打印标签，否则前台也不显示。数据库配置文件需要使用return方式返回，并且数组的[]最后要加；分号结尾。

QQ截图20190423091018.jpg

前台代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单提交系统</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-size: 14px;
        }
        form{
            width: 260px;
            margin:130px auto;
        }
        p{
            margin: 20px 0;
        }
        p:first-child{
            text-align: center;
            font-weight: bold;
            font-size: 22px;
        }
        p:last-child{
            text-align: center;
        }
    </style>
</head>
<body>
    <form>
        <p>账户登录系统</p>
        <p>
            <label>邮箱：</label>
            <input type="email" name="email">
        </p>
        <p>
            <label>密码：</label>
            <input type="password" name="password">
        </p>
        <p><button type="button">登录</button></p>

    </form>
    <SCRIPT>
        // 获取按钮
 let btn = document.getElementsByTagName('button')[0];
        // 创建按钮点击事件
 btn.onclick = function (){
            // 1.创建监听对象
 let xhr = new XMLHttpRequest();
            // 2.监听响应状态
 xhr.onreadystatechange = function () {
                // 如果获取到的返回值是4说明配置正确
 // 0: 请求未初始化
 // 1: 服务器连接已建立
 // 2: 请求已接收
 // 3: 请求处理中
 // 4: 请求已完成，且响应已就绪
 if (xhr.readyState === 4) {
                    // 返回200表示查询成功
 if (xhr.status === 200) {
                        let p = document.createElement('p');
                        p.style.color = 'red';

                        // .responseText把服务器发送的信息提取出来使用JSON.parse把数据转换成js对象格式。
 var json = JSON.parse(xhr.responseText);
                        // 从后台传递过来的数据如果查询到是1说明有数据如果是0说明没有数据内容
 if (json.status === 1) {
                            p.innerHTML = json.msg;
                        } else if (json.status == 0) {
                            p.innerHTML = json.msg;
                        }
                        // 把是否登录成功提示信息发送到页面上
 document.forms[0].appendChild(p);
                        // 禁用按钮
 btn.disabled = true;
                        // 设置定时器，让提示内容显示2秒跳转。
 setTimeout(function () {
                            document.forms[0].removeChild(p);
                            btn.disabled = false;
                            if (json.status == 1) {
                                location.href = 'admin.php';
                            }
                        }, 2000);

                    } else {
                        // 响应失败的提示
 alert('响应失败' + xhr.status);
                    }


                } else {

                }


            }
           
            // 设置一下请求方式以及后台文件
 xhr.open('post','include/check.php',true);
            // 这里需要修改表单头提交信息欺骗一下浏览器
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // 发送请求给后台
 let data = {
                email:document.getElementsByName('email')[0].value,
                password:document.getElementsByName('password')[0].value
 }
            // 把data以json字符串方式发送给服务器
 let data_json = JSON.stringify(data);
            // 由于直接发送的data_json数据没有下标，下面的data就是加上下标进行发送方便查询
 xhr.send('data='+data_json);
        }
    </SCRIPT>

</body>
</html>

后台验证页面代码：

<?php

// 数据库连接参数
$db = require 'database.php';

// 配置数据源DSN信息
$dsn = "{$db['type']}:host={$db['host']};dbname={$db['dbname']}";

// 连接数据库
try {
    $pdo = new PDO($dsn, $db['username'], $db['password']);
} catch (PDOException $e) {
    die('Connection Failed: ' . $e->getMessage());
}
//测试一下是否能接收到数据
 

$user = json_decode($_POST['data']);
 
$email = $user->email;
$password = $user->password;




$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";

$stmt = $pdo->prepare($sql);

$stmt->execute();


if ($stmt->fetchColumn(0) == 1) {

    echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
    exit;
} else {
    echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
    exit;
}

数据库配置代码：

<?php

// 数据库连接参数
return [
    'type' => 'mysql',
    'host' => 'localhost',
    'dbname' => 'user',
    'username' => 'root',
    'password' => 'root',
];

批改老师：查无此人批改时间：2019-04-23 13:49:51
老师总结：完成的不错。ajax用处比较大。特别是手机的列表页，上拉加载更多。继续加油。

ajax表单验证

热门词条