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分页功能的实现方法
Apr 25 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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
一个用php3编写的简单计数器
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP 日常开发小技巧
2009/09/23 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php对称加密算法示例
2014/05/07 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python代码制作configure文件示例
2014/07/28 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python如何统计序列中元素
2020/07/31 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
小学教育毕业生自荐信
2013/11/18 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis