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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
js获取域名的方法
Jan 27 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
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
function.inc.php超越php
2006/12/09 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
利用python实现AR教程
2019/11/20 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
企业治理工作自我评价
2013/09/26 职场文书
致200米运动员广播稿
2014/02/06 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书