jfinal与bootstrap的登出实战详解


Posted in Javascript onNovember 27, 2017

前言:本篇推出“jfinal与bootstrap的登出实战”,旨在介绍如果通过a标签弹出登出确认框,然后发送退出请求到jfinal,然后再刷新页面的做法。主要难点在于1.如果通过a标签的内容弹出登出确认框,2.如何通过a标签刷新对应弹出的页面。

前端技术

1.构建a标签

<a href="${ctx}/mem/logout"  target="ajaxTodo" callback="ajaxDone" atitle="你确定要退出吗?" id="user_login_out" style="padding: 0 6px;">退出</a>

注意:

1. target=”ajaxTodo”,指定a标签要通过ajax发起请求。
2. callback=”ajaxDone”,指定a标签回调函数
3. atitle=”你确定要退出吗?”,指定确认信息

2.初始化a标签ajax事件

function initUI(_box) {
 var $p = $(_box || document);

 // dwz.ajax.js
 if ($.fn.ajaxTodo) {
  $("a[target=ajaxTodo]", $p).ajaxTodo();
 }
}

注意:

1. 页面加载完成后执行initUI方法,使target为ajaxTodo的a标签具有指定的ajaxTodo方法。

3.a标签的ajax请求

function ajaxTodo(url, callback) {
 var $callback = callback;
 if (!$.isFunction($callback)) {
  $callback = eval('(' + callback + ')');
 }

 var forwardUrl = window.location.href;
 if (url.indexOf("?") != -1) {
  url += "&forwardUrl=" + forwardUrl;
 } else {
  url += "?forwardUrl=" + forwardUrl;
 }
 $.ajax({
  type : 'POST',
  url : url,
  dataType : "json",
  cache : false,
  success : $callback,
  error : YUNM.ajaxError
 });
}

注意:

1. forwardUrl 记录登出的页面

4.为jquery对象增加ajaxTodo方法

$.fn.extend({
 ajaxTodo : function() {
 return this.each(function() {
  var $this = $(this);
  $this.click(function(event) {
  var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
  YUNM.debug(url);
  if (!url.isFinishedTm()) {
   $.showErr($this.attr("warn"));
   return false;
  }
  var title = $this.attr("atitle");
  if (title) {
   $.showConfirm(title, function() {
   ajaxTodo(url, $this.attr("callback"));
   });
  } else {
   ajaxTodo(url, $this.attr("callback"));
  }
  event.preventDefault();
  });
 });
 },
});

5.回调函数

function ajaxDone(json) {
 YUNM.ajaxDone(json);
 if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
 // 如果指定了后调转页面,进行调转
 if (json.forwardUrl) {
  location.href = json.forwardUrl;
 }
 }
}

6.弹出weebox确认框

$.showConfirm = function(str, funcok, funcclose) {
 var okfunc = function() {
 $.weeboxs.close("yunm_confirm_box");
 funcok.call();
 };
 $.weeboxs.open(str, {
 boxid : 'yunm_confirm_box',
 contentType : 'text',
 showButton : true,
 showCancel : true,
 showOk : true,
 title : '确认',
 width : 280,
 type : 'wee',
 onopen : function() {
  init_ui_button();
 },
 onclose : funcclose,
 onok : okfunc
 });
};

function init_ui_button() {
 $("button.ui-button[init!='init']").each(function(i, o) {
 $(o).attr("init", "init"); // 为了防止重复初始化
 $(o).ui_button();
 });

}

jfinal技术

public void logout() {

 if (getSession().getAttribute("username") != null) {
  // 清除session
  getSession().removeAttribute("username");
 }

 ajaxDoneSuccess("登出成功!");

 renderJson();
 }

增加logout方法。

jfinal与bootstrap的登出实战详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
Bootstrap实现翻页效果
Nov 27 #Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
JS使用贪心算法解决找零问题示例
Nov 27 #Javascript
Vue.js实现分页查询功能
Nov 15 #Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 #Javascript
JS基于贪心算法解决背包问题示例
Nov 27 #Javascript
You might like
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
Javascript Math对象
2009/08/13 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python 的 with 语句详解
2014/06/13 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python实现AES加密解密
2019/03/28 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
详解Python IO口多路复用
2020/06/17 Python
python 绘制场景热力图的示例
2020/09/23 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
经典洗发水广告词
2014/03/13 职场文书
导游词之五台山
2019/10/11 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript