本文實例講述了jQuery基于ajax實現頁面加載后檢查用戶登錄狀態的方法。分享給大家供大家參考，具體如下：
擁有會員功能的網站，如果會員已經登錄，那么要顯示相應的登錄狀態，而且這種顯示的需求是在網站的每個頁面都有的（目前國內網站貌似都是這么做的，還沒有見過其他形式的狀態顯示方式），這樣，在打開一個新的頁面時就要知道這個會員是否已經登錄，需要判斷登錄的狀態。
1、解決方案。
為了能夠實現在每一個頁面判斷會員登錄狀態的功能，我采用了頁面時通過ajax傳遞參數通過后端返回的登錄狀態結果進行判斷，當然，這種方式實現的前提是登錄狀態在后端可以保持或者能夠查詢到并且不利用頁面向后端發送特別參數。
2、代碼部分。
（1）html部分
<div id="state_content"></div>
（2）jquery部分
jQuery(document).ready(function (){ getUserData();});function getUserData(){ var Option = { url: encodeURI('/Handler/AuthAccounts.ashx?action=getloginstate'), type: "post", dataType: 'text', cache: false, //設置為 false 將不會從瀏覽器緩存中加載請求信息。 async: true, //(默認: true)，所有請求均為異步請求。發送同步請求，請將此選項設置為 false。同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 timeout: 150000, //設置請求超時時間（毫秒）。此設置將覆蓋全局設置。 error: function () { }, success: function (data, textStatus) { if (data == null || data == undefined) { return false; } jsondata = eval('(' + data + ')'); if (jsondata.state == "success") { var weburl = '<a class="username">歡迎你,' + jsondata.message.split('|')[1] + '</a><a class="go_out" onclick="ExitLoginState()">退出</a>'; $("#state_content").html(weburl); //內容 } else { var textList = '<a href="/Login/index.shtml" rel="external nofollow" rel="external nofollow" >【登錄】</a><a href="/Register/index.shtml" rel="external nofollow" rel="external nofollow" >【注冊】</a>'; $("#state_content").html(textList); //內容 } }, beforeSend: function () { } }; jQuery.ajax(Option); return false;}function ExitLoginState(){ var Option = { url: encodeURI('/Handler/AuthAccounts.ashx?action=exitloginstate'), type: "post", dataType: 'text', cache: false, //設置為 false 將不會從瀏覽器緩存中加載請求信息。 async: true, //(默認: true)，所有請求均為異步請求。發送同步請求，請將此選項設置為 false。同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 timeout: 150000, //設置請求超時時間（毫秒）。此設置將覆蓋全局設置。 error: function () { }, success: function (data, textStatus) { if (data == null || data == undefined) { return false; } jsondata = eval('(' + data + ')'); if (jsondata.state == "success") { alert("已經退出"); var textList = '<a href="/Login/index.shtml" rel="external nofollow" rel="external nofollow" >【登錄】</a><a href="/Register/index.shtml" rel="external nofollow" rel="external nofollow" >【注冊】</a>'; $("#state_content").html(textList); //內容 } }, beforeSend: function () { } }; jQuery.ajax(Option); return false;}更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery操作json數據技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
