一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery基于ajax实现页面加载后检查用户登录状态的方法

时间:2022-06-25 17:15:41 编辑:袖梨 来源:一聚教程网

拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态。

1、解决方案。

为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然,这种方式实现的前提是登录状态在后端可以保持或者能够查询到并且不利用页面向后端发送特别参数。

2、代码部分。

(1)html部分

 代码如下复制代码

(2)jquery部分

 

 代码如下复制代码

jQuery(document).ready(function()

{

  getUserData();

});

functiongetUserData()

{

  varOption =

   {

    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)

     {

      returnfalse;

     }

     jsondata = eval('('+ data +')');

     if(jsondata.state =="success")

     {

      varweburl ='欢迎你,'+ jsondata.message.split('|')[1] +'退出';

      $("#state_content").html(weburl);//内容

     }

     else

     {

      vartextList ='【登录】【注册】';

      $("#state_content").html(textList);//内容

     }

    },

    beforeSend:function()

    {

    }

   };

  jQuery.ajax(Option);

  returnfalse;

}

functionExitLoginState()

{

  varOption =

   {

    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)

     {

      returnfalse;

     }

     jsondata = eval('('+ data +')');

     if(jsondata.state =="success")

     {

      alert("已经退出");

      vartextList ='【登录】【注册】';

      $("#state_content").html(textList);//内容

     }

    },

    beforeSend:function()

    {

    }

   };

  jQuery.ajax(Option);

  returnfalse;

}

热门栏目