登录  /  注册
博主信息
博文 48
粉丝 0
评论 0
访问量 38691
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0913- Ajax 及实战登录验证案列
3期-Shawn的博客
原创
705人浏览过

1.问答: Ajax的工作原理分析(用自己语言组织)

代为用户向服务器发送一段 javascript代码请求,等收到服务器的数据,再由javascript更新客 户端内容

2.编程: Ajax用户登录验证

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form method="post">
    <p>邮箱: <input type="email" name="email"></p>
    <p>密码: <input type="password" name="password"></p>
    <p><button type="button">提交</button></p>
</form>
<script>
    let btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
        //1.创建xhr对象
        let xhr = new XMLHttpRequest();

        //2.监听响应状态
        xhr.onreadystatechange = function()
    {
            if (xhr.readyState === 4) 
            { // 准备就绪
                // 判断响应结果:
                if (xhr.status === 200) 
                {
                    // 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
                    let p = document.createElement('p');  //创建新元素放返回的内容
                    p.style.color = 'red';
                    //p.innerHTML = xhr.responseText;
                    

                    //将服务器返回的json字符串转为js对象
                    let json = JSON.parse(xhr.responseText);
                    //如果json.status==1,表示查询成功
                    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';
                        }
                     },1000);

                   
                }else {
                         // 响应失败,并根据响应码判断失败原因
                         alert('响应失败'+xhr.status);
                       }
            } else {
                        // http请求仍在继续,这里可以显示一个一直转来转去的图片
                   }
         }


        //3.设置请求参数
        xhr.open('post','inc/check.php',true);

        //4. post请求必须要设置头信息,将内容类型设置为表单提交方式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //5.发送请求
        let data = {
          email:  document.getElementsByName('email')[0].value,
          password:  document.getElementsByName('password')[0].value
        };
        // data = 'email='+data.email+'&password='+data.password;
        let data_json = JSON.stringify(data);//JSON.stringify()将js对象转为json字符串
        xhr.send('data='+data_json);
         

}
    

</script>
</body>
</html>

运行实例 »

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

实例

<?php



//json_decode()将json字符串转为PHP对象
$user = json_decode($_POST['data']);
//echo $user->email;
$email = $user->email;
$password = md5($user->password);

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

$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
header("content-type:text/html;charset=utf-8");
echo '<h2>网站管理后台</h2>';

运行实例 »

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



3.手写: Ajax的完整运行流程(以get为例),共四步。

创建XMLHttpRequest对象,也就是创建一个异步调用对象;

监听响应状态;

设置请求参数;

发送请求。


代为用户向服务器发送请求,通过监听就绪状态,如果为4,准备就绪,然后获取请求码,如为200,表示从服务器上获取信息。


批改状态:合格

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

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

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