點擊登入按鈕時彈出登入視窗,輸入正確的使用者名稱密碼後點擊登入則登入視窗關閉,狀態改為目前使用者名稱.這篇文章主要介紹了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; } } } }
一般處理程序就結束了,下面貼出主介面的程式碼:
