Bootstrap+jfinal退出系统弹出确认框的实现方法


Posted in Javascript onMay 30, 2016

本文为大家分享了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方法。

效果:

Bootstrap+jfinal退出系统弹出确认框的实现方法

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望大家动手实现Bootstrap+jfinal退出系统弹出确认框,希望大家喜欢这篇文章,谢谢大家的阅读。

Javascript 相关文章推荐
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
最简单的tab切换实例代码
May 13 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Bootstrap+jfinal实现省市级联下拉菜单
May 30 #Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 #Javascript
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
JavaScript常用判断写法大全(推荐)
May 30 #Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 #Javascript
基于Angularjs实现分页功能
May 30 #Javascript
AngularJs实现分页功能不带省略号的代码
May 30 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
PHP XML数据解析代码
2010/05/26 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
vue.js中created方法作用
2018/03/30 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
美国性感女装网站:bebe
2017/03/04 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
护士自我鉴定
2013/10/23 职场文书
司机职责范本
2014/03/08 职场文书
早会主持词
2014/03/17 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015年司法局工作总结
2015/05/22 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书