jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

编辑：rootadmin

推荐整理分享jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

弹出层主要用于展示丰富的页面信息，还有一个更好的应用是弹出表单层丰富交互应用。常见的应用有弹出登录表单层，用户提交登录信息，后台验证登录成功后，弹出层消失，主页面局部刷新用户信息。本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用。

效果展示源码下载

HTML

由于本例UI部分使用了Bootstrap，以及使用jQuery插件，因此需要事先载入相关文件，推荐大家使用相关的CDN资源。

接着，我们在html主体部分放置触发弹出层的按钮链接，以及弹出层主体内容。以下是HTML主要代码：

上述代码中，#result用来展示用户信息，实际应用中，我们要在主网页中显示登录后的用户名等相关信息。#hw-layer-login是弹出层内容，默认是不可见的，它包含了一个登录表单，相关CSS样式请大家参阅Bootstrap官网。

jQuery

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

然后，调用hwLayer插件。

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

PHP

以上的Ajax异步操作当然离不开我们后端PHP，当然后端语言你可以自己选。login.php接收前端post上来的用户名和密码，然后比对验证是否正确。这里我偷懒，定义好了用户名和密码，而实际应用中我们应该使用PHP去读取数据库如MySQL中的用户表，比对用户表中的信息，并且以json数据返回登录结果给前端，请看代码：

以上所述是小编给大家介绍的jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

JavaScript 弹出子窗体并返回结果到父窗体的实现代码思路：用window.showModalDialog方法获取到弹出子窗体的引用，再在子页面用window.returnValue="***"来返回结果。示例代码：（用jQuery简化实现）父页面：parent.htm

JQuery Mobile 弹出式登录框的实现方法 ahref="#login"data-rel="popup"data-position-to="window"data-role="button"Login/adivdata-role="popup"id="login"data-theme="a"formstyle="padding:pxpx;"h3Pleasesignin/h3labelfor="un"class="ui-hidden-

jquery自适应布局的简单实例代码整理-uix.layout.js/***Grace[jQuery.js]**UIX页面布局*@qq.com*exp:*$.uix.layout();//执行布局*class="uix-layout-container";//标识布局容器*class="uix_box";//用于调整布