返回 ajax完成无...... 登陆

ajax完成无刷新表单验证

phpcn_u88733 2018-12-07 20:05:53 28

div{width:500px;border:1px solid #666666;border-radius: 4px;margin:0 auto;padding:15px;}

<div>
   <h3>表单验证</h3>
   <form>
       <p>用户名:<input type="text" name="username"></p>
       <p>密&emsp;码:<input type="password" name="password"></p>
       <button type="button">登录</button>
       <p class="tip"></p>
   </form>
</div>

<script type="text/javascript">
       //创建ajax对象
   let btn = document.getElementsByTagName('button')[0];
   btn.onclick = function(){
       let xhr = new XMLHttpRequest();
       //绑定事件监听
       xhr.onreadystatechange=function(){
           if(xhr.readyState===4){//检测就绪状态
               if(xhr.status===200){//服务器是否已经返回数据
                   let p = document.getElementsByClassName('tip')[0];
                   // p.innerHTML = xhr.responseText;return;
                   let json_obj = JSON.parse(xhr.responseText);
                   p.style.color='red';
                   p.innerHTML = json_obj.msg;
               }
           }
       }
       //设置请求参数
       xhr.open('post','inc/check.php',true);
       //设置请求头
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       //发送数据
       let data = {
           username:document.forms[0].username.value,
           password:document.forms[0].password.value
       };
       //把js对象解析成json字符串
       let json_str = JSON.stringify(data);
       xhr.send('data='+json_str);
   }
</script>

<?php

//将json字符串解析成php对象
$json_obj = json_decode($_POST['data']);

$username = $json_obj->username;
$password = sha1($json_obj->password);

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

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

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

$stmt->execute();

if($stmt->fetchColumn(0)==1){
   exit(json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']));
}else{
   exit(json_encode(['status'=>0,'msg'=>'用户名或密码错误']));
}

QQ图片20181114103819.png

最新手记推荐

• 仿qq登录界面 • xm商城作业6 • 小米商城作业5 • 小米商城作业4 • 小米商城作业3

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网