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 相关文章推荐
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
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的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python变量和数据类型详解
2017/02/15 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python 对象中的数据类型
2017/05/13 Python
Python中int()函数的用法浅析
2017/10/17 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
设计总监岗位职责
2013/12/07 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
八一慰问活动方案
2014/02/07 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
初中差生评语
2014/12/29 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
Golang连接并操作MySQL
2022/04/14 MySQL