jfinal与bootstrap的登出实战详解

前言:本篇推出“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方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Bootstrap+jfinal实现省市级联下拉菜单

    小小一个省市级关联菜单,却耗费了一个很多时间来摸索,原因在于对jquery不熟练,既然这么辛苦完成了一个组件,自然想要共享出来,让需要的人使用. 这只是一个基础版,后续还要再进行优化. 代码:省市级关联菜单下载地址 说明: sql语句就不再说了,里面有"city.sql"."provincial.sql"两个文件. 1.先说说获取数据 public void initProcitys() { logger.info("获取所在地区"); List

  • Bootstrap+jfinal退出系统弹出确认框的实现方法

    本文为大家分享了jfinal与bootstrap的登出操作,旨在介绍如何通过a标签弹出登出确认框,然后发送退出请求到jfinal,然后再刷新页面的做法.主要难点在于有以下两点: 1.如果通过a标签的内容弹出登出确认框: 2.如何通过a标签刷新对应弹出的页面. 一.前端技术 1.构建a标签 复制代码 代码如下: <a href="${ctx}/mem/logout" target="ajaxTodo" callback="ajaxDone"

  • jfinal与bootstrap的登录跳转实战演习

    前言:终于来了一篇有质量的文章,我个人感觉非常不错,<jfinal与bootstrap之间的登录跳转实战>.具体内容包含有点击登录弹出模态框.点击登录确认按钮后的validate.jfinal的validate.jfinal的session管理.ajax请求与返回信息处理.页面间智能跳转. 弹出模态框以及jquery validate可以参照jquery weebox总结.弹出窗口不居中显示?.jquery validate初上手系列文章. 从jfinal的validate说起 当然你可以参考

  • jfinal与bootstrap的登出实战详解

    前言:本篇推出"jfinal与bootstrap的登出实战",旨在介绍如果通过a标签弹出登出确认框,然后发送退出请求到jfinal,然后再刷新页面的做法.主要难点在于1.如果通过a标签的内容弹出登出确认框,2.如何通过a标签刷新对应弹出的页面. 前端技术 1.构建a标签 复制代码 代码如下: <a href="${ctx}/mem/logout"  target="ajaxTodo" callback="ajaxDone"

  • 动态上传jar包热部署的实战详解

    目录 定义简单的接口 该接口的一个简单的实现 反射方式热部署 注解方式热部署 测试 近期开发系统过程中遇到的一个需求,系统给定一个接口,用户可以自定义开发该接口的实现,并将实现打成jar包,上传到系统中.系统完成热部署,并切换该接口的实现. 定义简单的接口 这里以一个简单的计算器功能为例,接口定义比较简单,直接上代码. public interface Calculator {     int calculate(int a, int b);     int add(int a, int b);

  • React 模块联邦多模块项目实战详解

    目录 前提: 1. 修改webpack增加ModuleFederationPlugin 2.本地开发测试 3.根据路由变化自动加载对应的服务入口 4.线上部署 5.问题记录 前提: 老项目是一个多模块的前端项目,有一个框架层级的前端服务A,用来渲染界面的大概样子,其余各个功能模块前端定义自己的路由信息与组件.本地开发时,通过依赖框架服务A来启动项目,在线上部署时会有一个总前端的应用,在整合的时候,通过在获取路由信息时批量加载各个功能模块的路由信息,来达到服务整合的效果. // config.js

  • js单页hash路由原理与应用实战详解

    本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下: 什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能做在一个页面内. 那所谓的单页路由应用就是:在一个页面内,通过切换地址栏的URL来实现切换内容的变化. 如何知道URL切换了呢? 当url后面的锚文本发生变化时, 会触发onhashchange事件.通过这个事件,我们就可以对不同的URL 做出不同的处理.锚

  • Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本中并不支持,Opera 12 不支持 animation 属性. 进度条和其他独立组件一样,开发者可以根据自己的需要选择对应的版本: LESS: progress-bars.less SASS: _progress-bars.scss 基础进度条 实现原理: 需要两个容器,外容器使用类名.progre

  • 第十篇BootStrap轮播插件使用详解

    Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c

  • 第九篇Bootstrap导航菜单创建步骤详解

    创建一个标签式的导航菜单的步骤是: •在ul标签上加上class  nav •再ul标签上加上 class .nav-tabs. 在li标签上加上 active表示激活该项 <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">

  • Bootstrap框架的学习教程详解(二)

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/#download PS:其实我们不用下载bootstrap也可以使用

  • Linux文件服务器实战详解(系统用户)

    ftp匿名用户设置完成之后任何人都可以访问服务器端文件,目录,甚至可以修改删除文件和目录,,那如何存放私密文件并保证文件或者目录专属于拥有者呢,就需要使用vsftp系统用户来实现了. 1.在linux系统创建多个用户(useradd)并给用户设置密码 [root@www ~]# useradd xj1 [root@www ~]# useradd xj2 [root@www ~]# echo 123456|passwd --stdin xj1 [root@www ~]# echo 123456|p

  • Linux文件服务器实战详解(匿名用户)

    一.进程与线程 二.vsftp服务器 1.文件传输协议(file transfer protocol,FTP) 基于该协议ftp客户端和服务端实现文件共享,上传下载文件 FTP基于TCP协议生成一个虚拟的连接,用于控制ftp连接信息.同时再生成一个TCP连接用于FTP数据传输    2.ftp传输模式 3.FTP安装配置 a.yum方式安装 b.源码便宜安装 1)yum install -y vsftpd* 2)vsftpd安装后的配置文件路径,启动vsftpd服务以及查看进程是否启动 rpm

随机推荐