点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.这篇文章主要介绍了AJAX如何实现无刷新登录功能，需要的朋友参考下
点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.
第一步:
首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用.
打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});这是用于显示的,打开model message中的源码,找到关闭的关键代码:$(this).dialog('close');有了这两句代码,可以控制窗口的显示与关闭,可以进行下一步了.使用时需复制jquery-ui开发包的css文件夹,js文件夹到项目中.
第二步:
在这里先贴出处理AJAX请求的一般处理程序的代码,虽然正真写的时候都是用到再写,但这里不可能一步一步详细列出,为了便于理解,先将一般处理程序代码贴出来:
1.IsLogin.ashx,用于判断用户是否登录,登录则返回用户名.这里注意,在一般处理程序中要使用session,必须引入using System.Web.SessionState且要实现IRequiresSessionState接口
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.SessionState; namespace AJAX无刷新登录.AJAX { /// /// IsLogin 的摘要说明 /// public class IsLogin : IHttpHandler,IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; if (context.Session["userName"] != null) { string userName = context.Session["userName"].ToString(); context.Response.Write("yes|"+userName); } else { context.Response.Write("no"); } } public bool IsReusable { get { return false; } } } }
2.CheckLogin.ashx,用于检测用户输入用户名密码是否匹配,正确则返回yes,错误返回no,这里为了简便没有连接数据库.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.SessionState; namespace AJAX无刷新登录.AJAX { /// /// CheckLogin 的摘要说明 /// public class CheckLogin : IHttpHandler,IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string userName = context.Request["userName"]; string password=context.Request["password"]; if (userName=="admin"&&password=="admin") { context.Session["userName"] = "admin"; context.Response.Write("ok"); } else { context.Response.Write("no"); } } public bool IsReusable { get { return false; } } } }
3.LoginOut.ashx,用于控制用户登出,设置session为空.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.SessionState; namespace AJAX无刷新登录.AJAX { /// /// LoginOut 的摘要说明 /// public class LoginOut : IHttpHandler,IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Session["userName"] = null; } public bool IsReusable { get { return false; } } } }
一般处理程序就结束了,下面贴出主界面的代码:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
