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 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
js实现随机点名程序
2020/09/17 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python实现图片拼接的代码
2018/07/02 Python
python中partial()基础用法说明
2018/12/30 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
火锅店创业计划书范文
2014/02/02 职场文书
终止劳动合同协议书
2014/10/05 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
教师节主题班会教案
2015/08/17 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL