快捷導(dǎo)航

jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法

更新時(shí)間：2017年02月10日 10:23:48 作者：Mr-Robot

這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法。分享給大家供大家參考，具體如下：

擁有會(huì)員功能的網(wǎng)站，如果會(huì)員已經(jīng)登錄，那么要顯示相應(yīng)的登錄狀態(tài)，而且這種顯示的需求是在網(wǎng)站的每個(gè)頁(yè)面都有的（目前國(guó)內(nèi)網(wǎng)站貌似都是這么做的，還沒(méi)有見(jiàn)過(guò)其他形式的狀態(tài)顯示方式），這樣，在打開(kāi)一個(gè)新的頁(yè)面時(shí)就要知道這個(gè)會(huì)員是否已經(jīng)登錄，需要判斷登錄的狀態(tài)。

1、解決方案。

為了能夠?qū)崿F(xiàn)在每一個(gè)頁(yè)面判斷會(huì)員登錄狀態(tài)的功能，我采用了頁(yè)面時(shí)通過(guò)ajax傳遞參數(shù)通過(guò)后端返回的登錄狀態(tài)結(jié)果進(jìn)行判斷，當(dāng)然，這種方式實(shí)現(xiàn)的前提是登錄狀態(tài)在后端可以保持或者能夠查詢到并且不利用頁(yè)面向后端發(fā)送特別參數(shù)。

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, //設(shè)置為 false 將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。
    async: true, //(默認(rèn): true)，所有請(qǐng)求均為異步請(qǐng)求。發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行。
    timeout: 150000, //設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。
    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); //內(nèi)容
     }
     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" >【注冊(cè)】</a>';
      $("#state_content").html(textList); //內(nèi)容
     }
    },
    beforeSend: function ()
    {
    }
   };
  jQuery.ajax(Option);
  return false;
}
function ExitLoginState()
{
  var Option =
   {
    url: encodeURI('/Handler/AuthAccounts.ashx?action=exitloginstate'),
    type: "post",
    dataType: 'text',
    cache: false, //設(shè)置為 false 將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。
    async: true, //(默認(rèn): true)，所有請(qǐng)求均為異步請(qǐng)求。發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行。
    timeout: 150000, //設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。
    error: function ()
    {
    },
    success: function (data, textStatus)
    {
     if (data == null || data == undefined)
     {
      return false;
     }
     jsondata = eval('(' + data + ')');
     if (jsondata.state == "success")
     {
      alert("已經(jīng)退出");
      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" >【注冊(cè)】</a>';
      $("#state_content").html(textList); //內(nèi)容
     }
    },
    beforeSend: function ()
    {
    }
   };
  jQuery.ajax(Option);
  return false;
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: