jfinal与bootstrap的登出实战

红太狼 2021-05-10 11:18 411阅读 0赞

**前言**：本篇推出“jfinal与bootstrap的登出实战”，旨在介绍如果通过a标签弹出登出确认框，然后发送退出请求到jfinal，然后再刷新页面的做法。主要难点在于1.如果通过a标签的内容弹出登出确认框，2.如何通过a标签刷新对应弹出的页面。

## 前端技术 ##

**1.构建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请求**

注意：  
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方法。

## 效果 ##

![这里写图片描述][20150918142516680]

[20150918142516680]: /images/20210506/d11ff80b24da48789c6913b903142b9f.png