jQuery+ajax實現(xiàn)用戶登錄驗證

更新時間：2020年09月13日 10:40:06 作者：暗鎖讀客

這篇文章主要為大家詳細介紹了jQuery+ajax實現(xiàn)用戶登錄驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery+ajax實現(xiàn)用戶登錄驗證的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>登錄界面</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  h3{
  display: block;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: cornflowerblue;
  cursor: move;
  }
  #login{
  width: 500px;
  height: 270px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -140px;
  border: 1px solid #6495ED;
  background-color: #FFFFFF;
  display: block;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  }
  table{
  margin-top: 50px;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 150px;
  text-align:center;
  }
  tr,td{
  border: none;
  }
  tr{
  height: 50px;
  }
  td{
  padding: 0 5px 0 5px;
  }
  #bg{
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.2);
  position: absolute;
  top: 0;
  left: 0;
  }
  span{
  width: 100px;
  height: 16px;
  display:block;
  margin-bottom: 12px;
  }
  body{
  width: 100%;
  height: 100%;
  }
  .inpt{
  width: 300px;
  height: 30px;
  outline: none;
  border: 1px solid darkturquoise;
  }
  .red{
  color: red;
  font-size: 12px;
  }
  .btn{
  outline: none;
  width: 60px;
  height: 25px;
  border: 1px solid #00CED1;
  }
 </style>
 <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  $(function () {
  // 定義變量
  var $mX;
  var $mY;
  var $move = false; // true是可以移動登錄框
  // 鼠標按下事件
  $("h3").mousedown(function (event) {
   $("#login").css("opacity",0.5); // 改變透明度
   $move = true;
   // 得到鼠標與登錄框原點之間的距離
   $mX = event.pageX-parseInt($("#login").css("left"));
    $mY = event.pageY-parseInt($("#login").css("top"));
  })
  // 鼠標移動事件
  $(document).mousemove(function (event) {
   // 得到登錄框要移動的量
   var x = (event.pageX-$mX);
   var y = (event.pageY-$mY);
   console.log(x,y)
   if($move){
   if(x>0&&y>0){
    $("#login").css("left",x+"px")
    $("#login").css("top",y+"px")
   }
   
   }
  }).mouseup(function () {
   // 鼠標彈起事件
   $move = false;
   $("#login").css("opacity",1);
  })
  
//  異步請求
  $(":submit").click(function () {
   $.ajax({
   type:"get",
   url:"data.php",
   data:{"name":$("#user").val(),"password":$("#pwd").val()},
   dataType:"json",
   success:function (data) {
    console.log("成功：",data);
    /*if (data.usermsg==1&&data.pwdmsg==1) {
    $(location).prop("href","index1.html");
    } else{
    $("span").text("用戶名或密碼錯誤").prop("class","red");
    }*/
    if (data.usermsg==1&&data.pwdmsg==1) {
    $(location).prop("href","index1.html");
    } else if(data.usermsg==0&&data.pwdmsg==0){
    $("span").text("用戶名或密碼錯誤").prop("class","red");
    } else if(data.usermsg==0&&data.pwdmsg==1){
    $("span").text("該用戶不存在").prop("class","red");
    } else if(data.usermsg==1&&data.pwdmsg==0){
    $("span").text("密碼錯誤").prop("class","red");
    }
   },
   error:function (err) {
    console.log("失敗",err);
   }
   })
  })
  $(":reset").click(function () {
   $("span").text("");
  })
  
  })
 </script>
 
 </head>
 <body>
 <div id="bg"></div>
 <form action="javascript:;" id="login" method="get">
  <h3>歡迎登錄！</h3>
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td align="right">用戶名：</td>
   <td align="left"><input type="text" class="inpt" id="user" name="userName"/></td>
  </tr>
  <tr>
   <td align="right">密&nbsp&nbsp&nbsp碼：</td>
   <td align="left"><input type="password" class="inpt" id="pwd" name="pwd"/></td>
  </tr>
  <tr>
   <td align="center" colspan="2">
   <span></span>
   <input type="submit" class="btn" value="提交"/>
   &nbsp&nbsp&nbsp&nbsp&nbsp
   <input type="reset" class="btn" value="重置"/>
   </td>
  </tr>
  </table>
 </form>
 
 </body>
</html>

<?php
 $user="將軍";
 $password="1234321";
 $username=$_GET["name"];
 $pwd=$_GET["password"];
 $usermsg=0;
 $pwdmsg=0;
 if($user==$username){
 $usermsg=1;
 }
 if($password==$pwd){
 $pwdmsg=1;
 }
 echo json_encode(array("usermsg"=>$usermsg,"pwdmsg"=>$pwdmsg));
?>

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>登錄成功頁面</title>
 </head>
 <body>
 <span id="" style="font-size: 60px;color: #008000;">
  登錄成功
 </span>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>登錄失敗頁面</title>
 </head>
 <body>
 <span id="" style="font-size: 60px;color: #FF0000;">
  登錄失敗
 </span>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: