博主信息
博文 60
粉丝 1
评论 1
访问量 76546
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
利用Ajax与JSON来做表单验证_2018年9月13日
PHP学习
原创
922人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .box {
            margin: 50px auto;
            width: 400px;
            height: 300px;
            background-color: #efefef;
            border: 1px solid lightgray;
            text-align: center;
            color: #636363;
            box-shadow: 2px 2px 2px #999;
        }
    </style>
</head>
<body>
<div class="box">
    <h2>用户登录</h2>
    <form>
        <p>邮箱:<input name="email" type="email"></p>
        <p>密码:<input name="password" type="password"></p>
        <p><button type="button">登录</button></p>
    </form>
</div>
<script>
    //先获取提交按钮
    let btn = document.getElementsByTagName('button')[0];

    //下面来写点击登录按钮发生的一些事件,利用Ajax来异步操作
    btn.onclick =  function () {
        //创建xhr对象是Ajax里面的对象,所以要new下它,然后将获取的值保存到xhr里面
        let xhr = new XMLHttpRequest();

        //监听响应的状态
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {//等于4的就是状态码为就绪的意思所以判断是否等于4
                if (xhr.status === 200) {//判断请求状态码是否200,是就是从服务器返回了数据
                    let p = document.createElement('p');//创建一个新的元素,在返回成功的时候可以创建新的元素
                    p.style.color = 'red';

                    let json = JSON.parse(xhr.responseText);
                    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;
                    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','inc/check.php',true);//默认就是请求参数,url地址,以及方式.这里面就是open(方式,URL地址,方式)
        //设置头信息,将内容类型设置成表单提交
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //发送请求,定义一个数组发送过去
        let data = {
            email: document.getElementsByName('email')[0].value,
            password: document.getElementsByName('password')[0].value
        };
        let data_json = JSON.stringify(data);
        xhr.send('data='+data_json);
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<?php
//print_r($_POST['data']);
$user = json_decode($_POST['data']);
//接受由$_POST传过来的参数,[data]是从JSON处理过后传过来的数据

$email =$user->email;
//获取从data中传过来的数据库的email值

$password = sha1($user->password);
//将获取过来的密码进行加密,好跟数据库中的数据进行比较

$pdo = new PDO('mysql:host=localhost;dbname=php','root','root');

//准备一个sql语句来查询数据库中的东西

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

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

$stmt->execute();

if ($stmt->fetchColumn(0) == 1 ) {
    //利用fetchColumn来判断是否有数据,有为真(ture)就是1,就等于1,如果等于1就进行判断
    echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']);
    exit;
}else {
    echo json_encode(['status'=>0,'msg'=>'登录失败,邮箱或密码错误...']);
    exit;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:在做成功之后,最后就是用户名和密码输入正确,跟数据库里面的一样,但是还是提示用户名或密码错误 ,是怎么回事呢?

以上问题出错的原因是,数据库字段密码设置的长度是24字节,所以在进行sha1处理的时候,长度不够,所以就会出现密码错误的原因。

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学