jQuery+ajax实现用户登录验证


Posted in jQuery onSeptember 13, 2020

本文实例为大家分享了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">密   码:</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="提交"/>
        
   <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery实现简易验证插件封装
Sep 13 #jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
jQuery实现日历效果
Sep 11 #jQuery
jquery实现简单每周轮换的日历
Sep 10 #jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
jQuery实现简单三级联动效果
Sep 05 #jQuery
如何基于jQuery实现五角星评分
Sep 02 #jQuery
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python实现的计算器功能示例
2018/04/26 Python
python实现C4.5决策树算法
2018/08/29 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python xlwt模块使用代码实例
2020/06/10 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
最新大学职业规划书范文
2013/12/30 职场文书
办理信用卡工作证明
2014/01/11 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
委托书格式
2014/08/01 职场文书
2014年标准化工作总结
2014/12/17 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
MySQL如何解决幻读问题
2021/08/07 MySQL
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
python​格式化字符串
2022/04/20 Python
Golang bufio详细讲解
2022/04/21 Golang