Of Stack

jQuery+ajax User Login Verification

  • 2021-08-21 19:30:59
  • OfStack

This article example for everyone to share jQuery + ajax to achieve user login verification of the specific code, for your reference, the specific content is as follows 


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title> Login interface </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 () {
  //  Defining variables 
  var $mX;
  var $mY;
  var $move = false; // true Yes, you can move the login box 
  //  Mouse press event 
  $("h3").mousedown(function (event) {
   $("#login").css("opacity",0.5); //  Change transparency 
   $move = true;
   //  Get the distance between the mouse and the origin of the login box 
   $mX = event.pageX-parseInt($("#login").css("left"));
    $mY = event.pageY-parseInt($("#login").css("top"));
  })
  //  Mouse movement event 
  $(document).mousemove(function (event) {
   //  Get the amount of login box to move 
   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 () {
   //  Mouse pop-up event 
   $move = false;
   $("#login").css("opacity",1);
  })
  
//   Asynchronous request 
  $(":submit").click(function () {
   $.ajax({
   type:"get",
   url:"data.php",
   data:{"name":$("#user").val(),"password":$("#pwd").val()},
   dataType:"json",
   success:function (data) {
    console.log(" Success: ",data);
    /*if (data.usermsg==1&&data.pwdmsg==1) {
    $(location).prop("href","index1.html");
    } else{
    $("span").text(" Wrong username or password ").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(" Wrong username or password ").prop("class","red");
    } else if(data.usermsg==0&&data.pwdmsg==1){
    $("span").text(" The user does not exist ").prop("class","red");
    } else if(data.usermsg==1&&data.pwdmsg==0){
    $("span").text(" Password error ").prop("class","red");
    }
   },
   error:function (err) {
    console.log(" Failure ",err);
   }
   })
  })
  $(":reset").click(function () {
   $("span").text("");
  })
  
  })
 </script>
 
 </head>
 <body>
 <div id="bg"></div>
 <form action="javascript:;" id="login" method="get">
  <h3> Welcome to log in! </h3>
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td align="right"> User name: </td>
   <td align="left"><input type="text" class="inpt" id="user" name="userName"/></td>
  </tr>
  <tr>
   <td align="right"> Dense &nbsp&nbsp&nbsp Code: </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=" Submit "/>
   &nbsp&nbsp&nbsp&nbsp&nbsp
   <input type="reset" class="btn" value=" Reset "/>
   </td>
  </tr>
  </table>
 </form>
 
 </body>
</html>

<?php
 $user=" General ";
 $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> Login Success Page </title>
 </head>
 <body>
 <span id="" style="font-size: 60px;color: #008000;">
   Login Successful 
 </span>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title> Login Failure Page </title>
 </head>
 <body>
 <span id="" style="font-size: 60px;color: #FF0000;">
   Login failed 
 </span>
 </body>
</html>
Related articles: