jQuery Ajax PHP弹出层的异步登录效果(带源代码下载)

弹出层主要用来显示丰富的页面信息，更好的应用是弹出表单层来丰富交互应用。常见的应用有弹出登录表单层，用户提交登录信息，后台验证成功登录后，弹出层消失，主页面本地刷新用户信息。本文将介绍如何使用jQuery Ajax PHP弹出层异步登录。

下载效果显示源代码。

超文本标记语言

由于本例UI部分使用了Bootstrap和jQuery插件，需要提前加载相关文件，建议使用相关的CDN资源。

Link rel='样式表' href='//cdn . bootscs.com/bootstrap/3 . 3 . 6/CSS/bootstrap . min . CSS ' link rel='样式表' href=' hwlayer.css '接下来，我们把触发弹出层的按钮链接和弹出层的主要内容放在html正文中。以下是主要的HTML代码：

a href=' # 0 ' class=' BTN BTN-危险BTN-LG ' id=' form-BTN ' data-show-layer=' HW-layer-log in ' role=' button '单击弹出登录表单/a div id=' result '/div class=' HW-overlay ' id=' HW-layer-log in ' div class=' HW-layer-wrap '按钮类型=' button ' class=' Close hwLayer-Close ' aria-label=' Close ' span aria-h Idden=' true '/span/button H3 Div class=' row ' form class=' form-horizontal ' action=' log in . PHP ' method=' post ' id=' log in-form ' Div class=' form-group ' Div class=' input-group ' Div class=' input-group-addon ' I class=' glyph glyph-user '/I/Div输入类型=' text ' class=' form-control ' name=' user ' id=' user ' placeholder='请输入用户名'/Div/Div Div class=' form-group ' Div class=' input ' div class=' form-group ' div class=' col-MD-11 col-MD-offset-1 '按钮类型=' submit ' class=' btnbtn-success HW layer-ok '登录/Span id=' msg '用户名：helloweba，密码：123/Span/div/form/div/div/div在上面的代码中，#result用于显示用户信息。 实际上，我们需要在主网页中显示登录的用户名和其他相关信息。#hw-layer-login是弹出的图层内容，默认不可见。它包含一个登录表单。相关CSS样式请参考Bootstrap官网。

框架

点击页面上的链接或按钮后，我们将调用hwLayer插件并触发登录弹出层。首先加载jQUery和hwLayer插件。

脚本src=' http :http://apps . bdimg.com/libs/jquery/1 . 9 . 1/jquery . min . js '/脚本src=' http 3360 jquery . hwLayer . js '/脚本然后，调用hwlayer插件。

$(function(){ $('#form-btn '))。hwLayer({ width: 480，taplayer : false })；});现在弹出来了，关键部分来了。我们填写账户信息点击登录后会发生什么？显然，作为表单提交事件，我们需要首先验证前端输入的有效性。这里我只是验证输入不能为空。然后提交Ajax，并将用户名和密码提交给后端login.php进行处理。Login.php会验证我们填写的账户信息是否正确，并将处理结果以json格式返回给前端。然后前端收到成功登录消息后，在主页面#result上显示登录结果用户名和登录时间，实现了大家常说的本地刷新效果，同时弹出层也要关闭。

$(function(){ $(')。hwLayer-ok’)。on('click ')，function(event){ event . preventdefault()；var user=$('#user ')。val()；var pass=$('#password ')。val()；If (user=='') {$ ('# msg ')。addclass ('text-dancer ')。文本('用户名不能为空！');返回false} if (pass=='') {$ ('# msg ')。addclass ('text-dancer ')。文本('密码不能为空！'。);返回false} $.ajax({ url: 'login.php '，type: 'POST '，dataType: 'json '，data: {username: user，password: pass}，Send: function () {$ ('# msg ')。addclass ('text-success ')。文本('登录.');$('.hwLayer-ok’)。attr('disabled '，true)；}，success:函数(RES){ if(RES . code==1){//登录成功$('#result ')。html('欢迎使用，' res.username '，登录时间：' RES . logintime ')；$ ('# msg ')。removeclass ('text-dancer ')。addclass ('text-success ')。文本('登录成功！'。);$('#hw-layer-login ')。hwLayer(' close ')；} else {$ ('# msg ')。addclass ('text-dancer ')。文本('错误的用户名或密码！'。);} $('.hwLayer-ok’)。remove attr(' disabled ')；} });});});服务器端编程语言（Professional Hypertext Preprocessor的缩写）

上面的Ajax异步操作当然离不开我们的后端PHP，当然你也可以选择自己的后端语言。login.php从前端服务器接收用户名和密码，然后比较身份验证是否正确。我在这里比较懒，已经定义了用户名和密码。但是在实际应用中，我们应该使用PHP读取MySQL等数据库中的用户表，比较用户表中的信息，用json数据将登录结果返回给前端。请查看代码：

$ username=strip slashes(trim($ _ POST[' username ']))；$ password=strip slashes(trim($ _ POST[' password ']))；if($ username==' helloweba ' $ password==' 123 '){ $ RES[' code ']=1；$ RES[' username ']=$ username；$res['logintime']=日期(' Y-m-d h : I ')；} else { $ RES[' code ']=0；} echo JSON _ encode($ RES)；以上是边肖介绍的关于jQuery Ajax PHP弹出层(带源代码下载)异步登录效果的知识。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！