首页 | 编程 | Java

jQuery+ajax实现用户登录验证

2020年09月13日 作者：暗锁读客原文

本文实例为大家分享了jQuery+ajax实现用户登录验证的具体代码，供大家参考，具体内容如下

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。

相关链接