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 multibox 全选
Mar 22 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python logging模块用法示例
2018/08/28 Python
详解python的四种内置数据结构
2019/03/19 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
爱我中华教学反思
2014/04/28 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014年大学生工作总结
2014/11/20 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python