博主信息
博文 38
粉丝 0
评论 0
访问量 30580
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
第十八课—Ajax 2018年9月13日 20时00分
空白
原创
817人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <style>

    </style>
</head>
<body>
<div class="box">
    <form>
        <p>
            <input type="email" placeholder="邮箱" name="email">
        </p>
        <p>
            <input type="password" placeholder="密码" name="pawd">
        </p>
        <button type="button">提交</button>
        <p id="tips" style="color: red;"></p>
    </form>
</div>
</body>
<script type="text/javascript">
    let btu = document.getElementsByTagName('button')[0];
    btu.onclick = function()
    {
        //1.创建xhr对象
        let xhr = new XMLHttpRequest();

        //2.监听响应状态
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4) { // 准备就绪
                // 判断响应结果:
                if (xhr.status === 200) {
                    
                    let json = JSON.parse(xhr.responseText);
                    if (json.status === 1) {
                        document.getElementById('tips').innerHTML = json.msg;

                    } else if (json.status == 0) {
                        document.getElementById('tips').innerHTML = json.msg;
                    }
                    // 将响应文本添加到新元素上
                    btn.disabled = true;
                    setTimeout(function(){
                        document.getElementById('tips').innerHTML = '';
                        btn.disabled = false;
                        if (json.status == 1) {
                            location.href = './inc/admin.php';
                        }
                    },2000);
                } else {
                    // 响应失败,并根据响应码判断失败原因
                    alert('响应失败'+xhr.status);
                }
            } else {
                // http请求仍在继续,这里可以显示一个一直转来转去的图片
                alert('网络连接中断');
            }

        }

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

        //4. 设置头信息,将内容类型设置为表单提交方式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        
        //5.发送请求
        let data = {
          email:  document.getElementsByName('email')[0].value,
          password:  document.getElementsByName('pawd')[0].value
        };
        // data = 'email='+data.email+'&password='+data.password;
        let data_json=JSON.stringify(data);
        xhr.send('data='+data_json);
    } 
</script>
</html>

运行实例 »

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

实例

<?php
/**
 * 数据验证
 */
$user = json_decode($_POST['data']);
$email = $user->email;
$password = sha1($user->pawd);

$pdo = new PDO('mysql:host=localhost;dbname=test','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
echo "<h2>后台管理系统</h2>";

运行实例 »

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

1.png

手抄

22.jpg

22.jpg


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系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+教程免费学