最近學(xué)習(xí)了如何實(shí)現(xiàn)無刷新登錄,大體的效果如下(界面比較丑,請(qǐng)自行忽略....):
點(diǎn)擊登錄按鈕時(shí)彈出登錄窗口,輸入正確的用戶名密碼后點(diǎn)擊登錄則登錄窗口關(guān)閉,狀態(tài)改為當(dāng)前用戶名.
第一步:
首先彈出窗口使用的是jquery-ui中的控件,第一步要學(xué)會(huì)如何使用.
打開解壓后的jquery-UI下的development-bundle->demos,找到index.html,選擇dialog下的model dialog,右鍵查看源碼,觀察如何使用該控件,找到一句關(guān)鍵代碼:$("#dialog-modal").dialog({height: 140,modal: true});這是用于顯示的,打開model message中的源碼,找到關(guān)閉的關(guān)鍵代碼:$(this).dialog('close');有了這兩句代碼,可以控制窗口的顯示與關(guān)閉,可以進(jìn)行下一步了.使用時(shí)需復(fù)制jquery-ui開發(fā)包的css文件夾,js文件夾到項(xiàng)目中.
第二步:
在這里先貼出處理AJAX請(qǐng)求的一般處理程序的代碼,雖然正真寫的時(shí)候都是用到再寫,但這里不可能一步一步詳細(xì)列出,為了便于理解,先將一般處理程序代碼貼出來:
1.IsLogin.ashx,用于判斷用戶是否登錄,登錄則返回用戶名.這里注意,在一般處理程序中要使用session,必須引入using System.Web.SessionState且要實(shí)現(xiàn)IRequiresSessionState接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX無刷新登錄.AJAX
{
/// summary>
/// IsLogin 的摘要說明
/// /summary>
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,用于檢測(cè)用戶輸入用戶名密碼是否匹配,正確則返回yes,錯(cuò)誤返回no,這里為了簡(jiǎn)便沒有連接數(shù)據(jù)庫.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX無刷新登錄.AJAX
{
/// summary>
/// CheckLogin 的摘要說明
/// /summary>
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,用于控制用戶登出,設(shè)置session為空.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX無刷新登錄.AJAX
{
/// summary>
/// LoginOut 的摘要說明
/// /summary>
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;
}
}
}
}
一般處理程序就結(jié)束了,下面貼出主界面的代碼:
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AJAX無刷新登錄.Login" %>
!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="JQueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
script src="JQueryUI/jquery-1.4.2.min.js">/script>
script src="JQueryUI/jquery-ui-1.8.2.custom.min.js">/script>
script type="text/javascript">
//判斷是否登錄,登錄則顯示登錄名,隱藏登錄按鈕,顯示注銷按鈕
//否則相反
var isLogin = function () {
$.post("/AJAX/IsLogin.ashx", function (data) {
var strs = data.split('|');
if (strs[0] == "yes") {
$("#divShowLogin").hide();
$("#divShowLoginOut").show();
$("#spanName").text(strs[1]);
} else {
$("#divShowLogin").show();
$("#divShowLoginOut").hide();
$("#spanState").text("未登錄");
}
});
}
$(function () {
isLogin();
//點(diǎn)擊登錄彈出登錄窗口
$("#btnShowLogin").click(function () {
//模態(tài)窗口,設(shè)定長(zhǎng)寬
$("#divLogin").dialog({
height: 160,
width: 300,
modal: true
});
});
//點(diǎn)擊取消則關(guān)閉彈出框
$("#btnCancel").click(function () {
$("#divLogin").dialog('close');
});
//點(diǎn)擊登錄發(fā)送post請(qǐng)求在一般處理程序CheckLogin.ashx中驗(yàn)證登錄,
//根據(jù)回調(diào)函數(shù)結(jié)果判斷是否登錄成功
$("#btnLogin").click(function () {
var userName = $("#txtUserName").val();
var password = $("#txtPwd").val();
$.post("/AJAX/CheckLogin.ashx", { "userName": userName, "password": password }, function (data) {
if (data == "ok") {
$("#divLogin").dialog('close');
isLogin();
}
else {
alert("用戶名或密碼錯(cuò)誤");
}
});
});
//點(diǎn)擊注銷發(fā)送post請(qǐng)求,在一般處理程序中設(shè)置session為null,并調(diào)用isLogin函數(shù)刷新狀態(tài)
$("#btnExit").click(function () {
$.post("/AJAX/LoginOut.ashx", function () {
isLogin();
});
});
});
/script>
/head>
body>
form id="form1" runat="server">
div id="divShowLogin" style="display: none">
span id="spanState">/span>
input type="button" value="登錄" id="btnShowLogin" />
/div>
div id="divShowLoginOut" style="display: none">
span id="spanName">/span>
input type="button" value="注銷" id="btnExit" />
/div>
div id="divLogin" title="登錄窗口" style="display: none">
table style="text-align: left" id="tbLoin">
tr>
td>用戶名：/td>
td>
input type="text" id="txtUserName" />/td>
/tr>
tr>
td>密碼：/td>
td>
input type="password" id="txtPwd" />/td>
/tr>
tr>
td>
input type="button" value="登錄" id="btnLogin" />/td>
td style="text-align: left">
input type="button" value="取消" id="btnCancel" />/td>
/tr>
/table>
/div>
/form>
/body>
/html>
以上所述是小編給大家介紹的AJAX如何實(shí)現(xiàn)無刷新登錄功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
- jQuery Ajax 實(shí)現(xiàn)在html頁面實(shí)時(shí)顯示用戶登錄狀態(tài)
- Ajax實(shí)現(xiàn)帶有驗(yàn)證碼的局部刷新登錄界面
- jQuery+Ajax用戶登錄功能的實(shí)現(xiàn)
- 一款經(jīng)典的ajax登錄頁面 后臺(tái)asp.net
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- 基于jquery ajax 用戶無刷新登錄方法詳解
- PHP+jQuery+Ajax實(shí)現(xiàn)用戶登錄與退出
- asp.net jQuery Ajax用戶登錄功能的實(shí)現(xiàn)
- ajax實(shí)現(xiàn)登錄功能
