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 版本的文本输入框检查器Input Check
Jul 09 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
javascript复制对象使用说明
Jun 28 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 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
php相当简单的分页类
2008/10/02 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
物理系毕业生自荐信
2013/11/01 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
借款协议书
2014/04/12 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
财务管理专业自荐书
2014/09/02 职场文书
先进党组织事迹材料
2014/12/26 职场文书
检察院起诉意见书
2015/05/20 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
oracle索引总结
2021/09/25 Oracle