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中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
JS中的三个循环小结
Jun 20 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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基础学习笔记
2007/03/18 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
python访问sqlserver示例
2014/02/10 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
高三政治教学反思
2014/02/06 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
公司股权转让协议书
2014/04/12 职场文书
会计专业求职信
2014/08/10 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
投标单位介绍信
2015/05/05 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
Python借助with语句实现代码段只执行有限次
2022/03/23 Python