Php+Json+Ajax+jQuery无刷新异步弹出层登录教程(附源码)

弹出层登陆效果预览:

511遇见

首先引入Bootsrtap及相关的css,js文件

  1. <link rel="stylesheet" href="css/bootstrap.min.css">
  2. <link rel="stylesheet" href="css/popupwindow.css">
  3. <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
  4. <script src="js/jquery.popupwindow.js"></script>

html代码

首先设置一个弹出登陆按钮,这里主要使用了Bootstrap的UI,然后是表单的设置,#hw-layer-login是弹出层内容,默认是不可见的,它包含了一个登录表单。

  1. <div class="optlist" style="text-align:center;margin:250px auto 0">
  2.  
  3.     <a href="#0" class="btn btn-danger btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">点击弹出登录表单</a>
  4.  
  5.     <div id="result"></div>
  6. </div>
  7.  
  8. <div class="hw-overlay" id="hw-layer-login">
  9.     <div class="hw-layer-wrap">
  10.         <button type="button" class="close popupwindow-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  11.         <h3 class="hw-layer-title">用户登录</h3>
  12.         <div class="row">
  13.             <form class="form-horizontal" action="login.php" method="post" id="login-form">
  14.                 <div class="form-group">
  15.                     <div class="input-group">
  16.                         <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
  17.                         <input type="text" class="form-control" name="user" id="user" placeholder="请输入用户名">
  18.                     </div>
  19.                 </div>
  20.                 <div class="form-group">
  21.                     <div class="input-group">
  22.                         <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
  23.                         <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
  24.                     </div>
  25.                 </div>
  26.                 <div class="form-group">
  27.                     <div class="col-md-11 col-md-offset-1">
  28.                         <button type="submit" class="btn btn-success popupwindow-ok">登录</button>
  29.                         <span id="msg">用户名:511yj.com,密码:123</span>
  30.                     </div>
  31.                 </div>
  32.             </form>
  33.         </div>
  34.     </div>
  35. </div>

jQuery和ajax操作

当我们点击登录按钮后先调用jquery.js,然后加载jquery.popupwindow.js,弹出登录层,填写好账号信息,点击登录后,表单提交给login.php,先要验证前端输入的合法性,这里只是简单的验证输入不能为空的情况。然后提交Ajax,将用户名和密码内容提交给后端login.php来处理。login.php它会验证我们填写的账号信息是否正确,并且将处理的结果以json格式返回给前端。那么当前端收到登录成功的信息时,将登录结果用户名和登录时间显示在主页面上,即实现了大家常说的局部刷新效果,同时应该关闭弹出层。

login.php验证

当然这里只在login.php做了一个用户名和密码的判断,实际操作起来我们应当去读取数据库和数据库的数据比较验证。

  1. //获取AJAX提交过来的帐号(安全起见做了安全过滤)
  2. $username = htmlspecialchars($_POST['username']); 
  3.  
  4. //获取AJAX提交过来的密码(安全起见做了安全过滤)
  5. $password = htmlspecialchars($_POST['password']);
  6.  
  7. //判断输入的帐号密码是否正确(一般这里是从数据库获取数据来与提交的数据进行对比)
  8. if($username == 'sucainiu' && $password == '123456') 
  9. {
  10. 	//登录成功 返回code=1,logintime=时间为当前时间
  11. 	$arr = array("code"=>1,"logintime"=>date("Y-m-d H:i:s"));
  12. }
  13. else
  14. {
  15. 	//登录失败 返回code=2,logintime=时间为当前时间
  16. 	$arr = array("code"=>2,"logintime"=>date("Y-m-d H:i:s"));
  17. }
  18. //将PHP数组转换成JSON格式数据,以便前台JS好接收返回值
  19. echo json_encode($arr);

以上只是一个简单的思路和流程,在实际操作中我们还需要完善,希望对你有所启发和帮助。

百度云盘源码下载:http://pan.baidu.com/s/1boZWFmB


发布日期:

所属分类: Php 标签: