弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用。常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息。本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用。
HTML
由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源。
rush:xhtml;">
上述代码中,#result用来展示用户信息,实际应用中,我们要在主网页中显示登录后的用户名等相关信息。#hw-layer-login是弹出层内容,默认是不可见的,它包含了一个登录表单,相关CSS样式请大家参阅Bootstrap官网。
我们在点击页面中的链接或按钮后,会调用hwLayer插件,触发登录弹出层。先加载jQUery和hwLayer插件。
现在,弹出层出来了,而关键的部分也来了,我们在填写好账号信息,点击登录后,会发生什么?很显然,作为表单提交事件,我们先要验证前端输入的合法性,这里我只是简单的验证输入不能为空的情况。然后提交Ajax,将用户名和密码内容提交给后端login.PHP来处理。login.PHP它会验证我们填写的账号信息是否正确,并且将处理的结果以json格式返回给前端。那么当前端收到登录成功的信息时,将登录结果用户名和登录时间显示在主页面#result上,即实现了大家常说的局部刷新效果,同时应该关闭弹出层。
以上的Ajax异步操作当然离不开我们后端PHP,当然后端语言你可以自己选。login.PHP接收前端post上来的用户名和密码,然后比对验证是否正确。这里我偷懒,定义好了用户名和密码,而实际应用中我们应该使用PHP去读取数据库如MysqL中的用户表,比对用户表中的信息,并且以json数据返回登录结果给前端,请看代码:
以上所述是小编给大家介绍的jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。