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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
Session的工作方式
2006/10/09 PHP
php精度计算的问题解析
2019/06/21 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python实现对变位词的判断方法
2020/04/05 Python
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
办理护照工作证明
2014/10/10 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
观看建国大业观后感
2015/06/01 职场文书
党员转正介绍人意见
2015/06/03 职场文书
公司处罚决定书
2015/06/24 职场文书
初中生物教学随笔
2015/08/15 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
一条 SQL 语句执行过程
2022/03/17 MySQL