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

ajax完成无刷新表单验证

phpcn_u887332018-12-07 20:05:5346

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

最新手记推荐

• 页面中常见垂直三级导航• 商品导航功能• 搭建后台模板• 常用导航二级菜单布局-浮动、定位• 常用导航条布局-浮动、小图标添加、div命名规则减少代码量

全部回复(0)我要回复

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