AJAX实现无刷新登录功能的方法
YPE html>
最近å°ç¼–å¦ä¼šäº†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;
}
}
}
}
一般处ç†ç¨‹åºå°±ç»“æŸäº†,下é¢è´´å‡ºä¸»ç•Œé¢çš„代ç :
以上所述是å°ç¼–给大家AJAXå®žçŽ°æ— åˆ·æ–°ç™»å½•åŠŸèƒ½çš„æ–¹æ³•ï¼Œé‡åˆ°ç±»ä¼¼é—®é¢˜çš„朋å‹ä¸å¦¨å€Ÿé‰´å¦ä¹ 下，如果还有疑问，请在本文底部留言å§ã€‚
