jfinal的session管理
其实说到这,已经不是jfinal的session了,其实要说的是前端。
<c:choose> <c:when test="${sessionScope.username!=null}"> <span> <a href="javascript:void(0);" id="mycenter" style=""> ${sessionScope.username}<s class="icon_arrow icon_arrow_down"></s> </a> <i class="line"></i> <a href="/logout" title="退出" id="user_login_out" style="padding: 0 6px;">退出</a> </span> </c:when> <c:otherwise> <span> <a title="登录" href="javascript:show_pop_login();" id="show_pop_login">登录</a> </span> </c:otherwise> </c:choose>
注意:
这里使用了${sessionScope.username}获取session数据,这只是很简单的一个应用。
1中好像没什么可说的,但重要的是,你弹出登录框后,需要重新回到对应的跳转页面,然后显示登录的信息,好吧,我觉得没有解释清楚,那么上一张图吧!
这个图片为了商业机密,我只能截图到这里了,哈哈。
就像很多互联网网站一样,你如果是游客的话,也可以打开很多页面进行相关的信息进行查看,比如你可以打开1.html、2.html,但是这两个页面都可以点击登录按钮弹出登录框。那么问题来了,
你怎么保证从1.html打开登录的时候还跳转到1.html,从2.html打开登录成功后还跳转到2.html。
好吧,先说到这,这里卖个关子,我们继续看下个章节。
ajax请求与返回信息处理
1.弹出登录窗口
/** * 弹出登录框 */ function show_pop_login() { $.weeboxs.open(common.ctx + "/pages/login/login.jsp", { boxid : 'pop_user_login', contentType : 'ajax', showButton : false, showCancel : false, showOk : false, title : '会员登录', width : 700, type : 'wee' }); }
这是弹出登录框,至于weebox,你可以查看jquery weebox总结。
注意:
这里可能是从1.html打开的,也可能是从2.html页面打开的登录框。
2.然后我们再来看看登录的form表单
<form class="pop_login_form" action="${ctx}/login?callbackType=closeCurrent" method="post" onsubmit="return validateCallback(this, dialogAjaxDone);"> <div class="row "> <div class="row"> <label class="col-md-4" style="margin-top: 10px;" for="name">用户登录</label> </div> <div class="form-group"> <div class="row"> <div class="col-md-2 col-md-offset-2 tr th"> <label for="name">账户</label> </div> <div class="col-md-5"> <input type="text" style="" class="form-control required" id="username" name="username" placeholder="请输入会员编号" autocomplete="off"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-2 col-md-offset-2 tr th"> <label for="name">密码</label> </div> <div class="col-md-5"> <input type="password" class="form-control required" id="password" name="password" placeholder="请输入登陆密码"> </div> </div> </div> <div class="row"> <div class="checkbox"> <label> <input type="checkbox"> 记住我(下次自动登陆) </label> </div> </div> <div class="row"> <button type="submit" style="margin-bottom: 10px;" class="btn btn-default">提交</button> </div> </div> </form>
注意:
你需要关注action=”${ctx}/login?callbackType=closeCurrent”
再关注οnsubmit=”return validateCallback(this, dialogAjaxDone);”
好吧,我们先来看看登录的界面吧。
很漂亮的登录框,漂亮的不像实力派!嘻嘻。
然后关键的部分来了,请继续关注下节,我把发送ajax请求也放在下节的代码中,就省得重复。
页面间智能跳转
1.提交请求
/** * 普通ajax表单提交 * * @param {Object} * form * @param {Object} * callback * @param {String} * confirmMsg 提示确认信息 */ function validateCallback(form, callback, confirmMsg) { var $form = $(form); if (!$form.valid()) { return false; } var _submitFn = function() { var forwardUrl = window.location.href; var formUrl = $form.attr("action"); if (formUrl.indexOf("?") != -1) { formUrl += "&forwardUrl=" + forwardUrl; } else { formUrl += "?forwardUrl=" + forwardUrl; } $.ajax({ type : form.method || 'POST', url : formUrl, data : $form.serializeArray(), dataType : "json", cache : false, success : callback || YUNM.ajaxDone, error : YUNM.ajaxError }); } if (confirmMsg) { alertMsg.confirm(confirmMsg, { okCall : _submitFn }); } else { _submitFn(); } return false; }
好吧,看到这,你也许会说我剽窃了DWZ的灵感,OK,既然zhanghuihua同学开源了,有必要我们就好好的利用是吧。
注意:
你看到了forwardUrl的相关代码,没错,这个关键的字段就是来传递发起请求的页面路径,比如说1.html,2.html。
然后,ajax执行成功后,也就是登陆成功后,我们要执行callback方法,也就是dialogAjaxDone方法,那么你需要继续看下去。
2.回调函数
/** * dialog上的表单提交回调函数 服务器转回forwardUrl,可以重新载入指定的页面. * statusCode=YUNM.statusCode.ok表示操作成功, 自动关闭当前dialog */ function dialogAjaxDone(json) { YUNM.ajaxDone(json); if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) { if ("closeCurrent" == json.callbackType) { close_pop(); } // 如果指定了后调转页面,进行调转 if (json.forwardUrl) { location.href = json.forwardUrl; } } } ajaxDone : function(json) { if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) { if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]); ; } else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) { alertMsg.error(json[YUNM.keys.message]); } },
注意:
第二串代码就是出于错误消息,诸如“用户不存在的”,还有timeout。
第一串代码就是回调函数,其作用就是成功后关闭弹出框,然后再跳转到对应页面。
结语:OK,这样一篇文章希望能够给热爱jfinal和bootstrap的同学带来灵感!