9月13号学习Ajax的工作原理及编写Ajax用户登录验证 - 每日作业

Home > List of blog posts > 9月13号学习Ajax的工作原理及编写Ajax用户登录验证

Blogger Information

Blog 17

fans 0

comment 0

visits 13548

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form>
    <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';

                    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 {
                // http请求仍在继续,这里可以显示一个一直转来转去的图片
            }

        }

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

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

        //4.发送请求
        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);
        xhr.send('data='+data_json);
    }
</script>
</body>
</html>

运行实例 »

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

后台php的代码:

实例

<?php
//登录验证
///print_r($_POST);//可以将接收到的键值队：键=值，转为数组元素
/// echo $_POST['data'];
$user = json_decode($_POST['data']);
$email =$user->email;
$password = sha1($user->password);
//到数据库中去验证用户提交的数据
$pdo = new PDO('mysql:host=localhost;dbname=php','root','');
//必须通过统计满足记录数来确定是否存在用户
$sql= "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}'";
$stmt = $pdo->prepare($sql);
$stmt ->execute();
//判断是否验证成功
if ($stmt->fetchColumn(0) ==1){
    //['status'=>1,'msg'=>'正在登录.....'];
    echo json_encode(['status'=>1,'msg'=>'正在登录.....']);
    exit;
}else{
    echo json_encode(['status'=>0,'msg'=>'邮箱或者密码错误，登录失败.....']);
    exit;
}

运行实例 »

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

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

8月10号html练习

2018-08-10 22:45:44

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例