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


Posted in Javascript onFebruary 10, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
JS验证不重复验证码
Feb 10 #Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 #Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
js简单抽奖代码
2015/01/16 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
劲霸男装广告词
2014/03/21 职场文书
家长对孩子的评语
2014/04/18 职场文书
安全先进个人材料
2014/12/29 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书