AJAX如何实现无刷新登录功能

最近学习了如何实现无刷新登录，大体的效果如下（界面比较丑，请自行忽略.):

点击登录按钮时弹出登录窗口，输入正确的用户名密码后点击登录则登录窗口关闭，状态改为当前用户名。

第一步：

首先弹出窗口使用的是jquery-ui中的控件，第一步要学会如何使用。

打开解压后的jquery-UI下的开发包演示，找到index.html，选择对话下的模型对话框，右键查看源码，观察如何使用该控件，找到一句关键代码：$('#dialog-modal ').对话框({height: 140，modal : true })；这是用于显示的，打开模型消息中的源码，找到关闭的关键代码：美元（这个)。对话框("关闭");有了这两句代码，可以控制窗口的显示与关闭，可以进行下一步了。使用时需复制jquery-ui开发包的钢性铸铁文件夹，js文件夹到项目中。

第二步：

在这里先贴出处理创建交互式、快速动态网页应用的网页开发技术请求的一般处理程序的代码，虽然正真写的时候都是用到再写，但这里不可能一步一步详细列出，为了便于理解，先将一般处理程序代码贴出来：

1.IsLogin.ashx，用于判断用户是否登录，登录则返回用户名。这里注意，在一般处理程序中要使用会话，必须引入使用系统网络。会话状态且要实现IRequiresSessionState接口

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。会话状态命名空间创建交互式、快速动态网页应用的网页开发技术无刷新登录AJAX{ ///summary ///IsLogin的摘要说明////摘要公共类IsLogin : IHttpHandler，irequissessionstate { public void ProcessRequest(HttpContext context){ context } .响应。内容类型='文本/纯文本；如果(上下文。会话['用户名']!=null){ 0字符串用户名=上下文。会话['用户名']。ToString()；语境。响应。写入(“是|”用户名)；} else { context .回应。写下('否');} } public bool IsReuse { get { return false；} } }}2.CheckLogin.ashx，用于检测用户输入用户名密码是否匹配，正确则返回是的，错误返回不，这里为了简便没有连接数据库。

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。会话状态命名空间创建交互式、快速动态网页应用的网页开发技术无刷新登录AJAX{ ///summary ///CheckLogin的摘要说明////摘要公共类CheckLogin : IHttpHandler，irequissessionstate { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；字符串用户名=上下文。请求['用户名'];字符串密码=上下文。请求['密码'];if(用户名==' admin '密码==' admin '){ context .会话['用户名']='管理员；语境。回应。写下(“ok”)；} else { context .回应。写下('否');} } public bool IsReuse { get { return false；} } }}3.LoginOut.ashx，用于控制用户登出，设置会议为空。

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。会话状态命名空间创建交互式、快速动态网页应用的网页开发技术无刷新登录AJAX{ ///summary ///LoginOut的摘要说明////摘要公共类LoginOut : IHttpHandler，irequissessionstate { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；语境。会话['用户名']=空；} public bool IsReuse { get { return false；} } }}一般处理程序就结束了，下面贴出主界面的代码：

% @ Page Language=' c# ' AutoEventWireup=' true '代码在=' log in '之前。aspx。cs ' Inherits=' AJAX无刷新登录。登录"%!DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title link href=' jquery yui/CSS/ui-lighting/jquery-ui-1。8 .2 .定制。CSS ' rel='样式表'/脚本src=' http : JQueryUI/jquery-1。4 .2 .量滴js /脚本脚本src=' http : Jquery Ui/jquery-ui-1。8 .2 .定制。量滴js /脚本脚本类型=' text/javaquery判断是否登录，登录则显示登录名，隐藏登录按钮，显示注销按钮//否则相反var isLogin=function () { $ .post('/AJAX/IsLogin.ashx '，函数(数据){ var strs=data。拆分(' | ')；if(strs[0]==' yes '){ $(' # DivShowLogin ').hide()；$(' # DivShowcolginout ').show()；$('#spanName ').文本(strs[1])；} else { $('#divShowLogin ').show()；$(' # DivShowcolginout ').hide()；$('#spanState ').文本('未登录');} });} $(function(){ isLogin()；//点击登录弹出登录窗口$('#btnShowLogin ').单击(函数(){ //模态窗口，设定长宽$(' # DivLogon ').对话框({ height: 160，width: 300，model : true })；});//点击取消则关闭弹出框$('#btnCancel ').click(function () { $('#divLogin ')).对话框("关闭");});//点击登录发送邮政请求在一般处理程序CheckLogin.ashx中验证登录， //根据回调函数结果判断是否登录成功$('#btnLogin ').单击(function(){ var userName=$(' # txtUserName ').val()；var password=$('#txtPwd ').val()；$.post('/AJAX/CheckLogon。ashx '，{ 'userName': userName，' password': password })，函数(数据){ if(数据==' ok '){ $(' # DivLogon ').对话框("关闭");isLogin()；} else { alert('用户名或密码错误');} });});//点击注销发送邮政请求，在一般处理程序中设置会议为null，并调用isLogin函数刷新状态$('#btnExit ').单击(函数(){ $).post('/AJAX/LoginOut.ashx '，function(){ isLogin()；});});});/脚本/流浆池表单id=' form 1 ' runat=' server ' div id=' div show log in ' style=' display : none ' SPan id=' SPan state '/SPan输入类型='按钮'值='登录id=' btnShowLogin '/div div id=' divShowLoginOut ' style=' display : none ' SPan id=' SPan NAmE '/SPan输入类型='按钮'值='注销id=' btnExit '/div/div id=' div登录' title='登录窗口style=' display : none '表格style=' text-align : left ' id=' tbLoin ' tr TD用户名：/td td输入类型=' text ' id=' Txtusername '/TD/tr TD密码：/TD TD TD输入类型=' password ' id=' TxTPWd '/TD/tr tr TD输入类型='按钮'值='登录id=' btnLogin '/TD TD TD style=' text-align : left '输入类型='按钮'值='取消id=' BtNCEnel '/TD/tr/table/div/form/body/html以上所述是小编给大家介绍的创建交互式、快速动态网页应用的网页开发技术如何实现无刷新登录功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！