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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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中uploaded_files函数使用方法详解
2011/03/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
javascript 写类方式之一
2009/07/05 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
促销活动策划方案
2014/01/12 职场文书
三爱活动实施方案
2014/03/19 职场文书
艺术教育实施方案
2014/05/03 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
预备党员半年考察意见
2015/06/01 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
婚育证明样本
2015/06/16 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Elasticsearch 批量操作
2022/04/19 Python