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 相关文章推荐
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
javascript实现切换td中的值
Dec 05 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
layui表格实现代码
May 20 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
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学习 运算符与运算符优先级
2008/06/15 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
github配置使用指南
2014/11/18 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
挖掘机司机岗位职责
2014/02/12 职场文书
环保倡议书格式范文
2014/05/14 职场文书
英语专业求职信
2014/07/08 职场文书
施工单位安全责任书
2014/07/24 职场文书
企业催款函范本
2015/06/24 职场文书
趣味运动会简讯
2015/07/20 职场文书