abstract:用户登录的简单验证功能,利用数组来模拟实现(ajax+json)<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &nbs
用户登录的简单验证功能,利用数组来模拟实现(ajax+json)
<!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> <link rel="stylesheet" href="dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <form class="form-horizontal" style="margin-top:10px;"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="text" class="form-control" name="password" id="password" placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-success">登录</button> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10" id="check"> </div> </div> </form> </div> </div> </div> <script> let btn = document.getElementsByTagName('button')[0]; //console.log(btn); btn.onclick = function(){ //1.创建xhr对象 首先第一步 要new一个xhr出来。 let xhr = new XMLHttpRequest(); //2.监听响应状态 onreadystatechange xhr.onreadystatechange = function(){ //readyState 等于4 为就绪状态 if(xhr.readyState === 4){ //判断响应结果是否为200 if(xhr.status === 200){ //响应成功,通过xhr对象的responseText获取响应文本 //创建元素存放内容时使用 let p = document.createElement('p'); p.style.color = 'red'; //JSON.parse服务器响应字符串数据转化成json对象 console.log(xhr.responseText); let json = JSON.parse(xhr.responseText); //利用InnerHTML方式写入到新元素P上 if (json.status === 1) { p.innerHTML = json.msg; } else if (json.status === 0) { p.innerHTML = json.msg; } // 将响应文本添加到新元素上 document.getElementById('check').appendChild(p); // 将新元素插入到当前页面中 //将按钮禁用,防止多次点击 btn.disabled = true; //设置延时2秒钟 setTimeout(function(){ document.getElementById('check').removeChild(p); btn.disabled = false; if (json.status === 1) { location.href = 'admin.php'; } },2000); }else { // 响应失败,并根据响应码判断失败原因 alert('响应失败' + xhr.status); } }else{ //不为4 请求一直继续 } } //3.设置请求参数 xhr.open('post','demo1.php',true); //4.设置请求头信息,将内容模拟成表单提交方式 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //5.发送请求信息 let data = { email: document.getElementById('email').value, password : document.getElementById('password').value }; //JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串 let data_json=JSON.stringify(data); xhr.send('data='+data_json); //xhr.send(null); } </script> </body> </html>
demo1.php
<?php $arr = array("email"=>"admin@126.com","password"=>"123456"); //print_r($_POST['data']); //echo $data['email']; $user = json_decode($_POST['data']); $email = $user->email; //$password = sha1($user->password); $password = $user->password; if ($arr['email'] == $email && $arr['password'] == $password ) { echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ; exit; } else { echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ; exit; }
admin.php
<?php echo "<h3>我是一个后台</h3>";
Correcting teacher:天蓬老师Correction time:2019-01-15 14:24:43
Teacher's summary:ajax交互, 不刷新页面的也可以实现数据更新, ajax重点是在js对象的解析与dom操作