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绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery操作之效果详解
May 19 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
北京华建集团SQL面试题
2014/06/03 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
护理专业自我鉴定
2014/01/30 职场文书
4s店活动策划方案
2014/08/25 职场文书
护理实习生带教计划
2015/01/16 职场文书
校本课程教学计划
2015/01/19 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
信用卡收入证明范本
2015/06/12 职场文书