abstract：div{width:500px;border:1px solid #666666;border-radius: 4px;margin:0 auto;padding:15px;}<div>    <h3>表單驗(yàn)證</h3>    <form>        <p>

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

<div>
   <h3>表單驗(yàn)證</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">
       //創(chuàng)建ajax對(duì)象
   let btn = document.getElementsByTagName('button')[0];
   btn.onclick = function(){
       let xhr = new XMLHttpRequest();
       //綁定事件監(jiān)聽
       xhr.onreadystatechange=function(){
           if(xhr.readyState===4){//檢測(cè)就緒狀態(tài)
               if(xhr.status===200){//服務(wù)器是否已經(jīng)返回?cái)?shù)據(jù)
                   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;
               }
           }
       }
       //設(shè)置請(qǐng)求參數(shù)
       xhr.open('post','inc/check.php',true);
       //設(shè)置請(qǐng)求頭
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       //發(fā)送數(shù)據(jù)
       let data = {
           username:document.forms[0].username.value,
           password:document.forms[0].password.value
       };
       //把js對(duì)象解析成json字符串
       let json_str = JSON.stringify(data);
       xhr.send('data='+json_str);
   }
</script>

<?php

//將json字符串解析成php對(duì)象
$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'=>'登錄成功,正在跳轉(zhuǎn)...']));
}else{
   exit(json_encode(['status'=>0,'msg'=>'用戶名或密碼錯(cuò)誤']));
}