再谈ajax局部刷新
前言:所谓“学而不思则罔、思而不学则殆”,孔夫子说话就是有深意。之前我就发表了一篇极致ajax局部和整体刷新,同时又发表了jfinal与bootstrap的登录跳转实战、jfinal与bootstrap的登出实战,但是经过近来的实战和改进,发现上一次的做法并不优秀,用起来很笨拙,不顺手,而这一次的方案,恰好就解决了这个问题。 案例: 描述: 那这些简单的操作,都需要做一些什么工作呢? 加载登录/(用户名-退出)的页面<div id="login_tip" url="${ctx}/mem/initLoginTip"></div>
// 有url的div主动请求服务端获取数据
$("div[url]",$p).each(function() {
var $this = $(this);
var url = $this.attr("url");
if (url) {
$this.ajaxUrl({
type : "POST",url : url,callback : function() {
}
});
}
});
当然ajaxUrl方法先不要去关注太多,稍后会进一步解释。 点击登录连接,打开登录对话框<a title="登录" href="${ctx}/mem/initLogin/${sessionScope.username.username}" target="dialog" width="600">登录</a>
当输入信息正确,则刷新登录信息,显示用户名和退出按钮<form class="pop_login_form" action="${ctx}/mem/login?callbackType=closeCurrent&rel=login_tip" method="post"
onsubmit="return validateCallback(this,dialogAjaxDone)">
function dialogAjaxDone(json) {
YUNM.ajaxDone(json);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
if (json.rel) {// 指定对应的div进行数据加载
var url = json.forwardUrl,options = {
elementId : json.rel
};
var op = $.extend({
data : {},elementId : "",callback : null
},options);
var $panel = $("#" + op.elementId);
if (!url) {
url = $panel.attr("url");
}
if (url) {
$panel.ajaxUrl({
type : "POST",data : op.data,callback : function(response) {
if ($.isFunction(op.callback))
op.callback(response);
}
});
}
}
if ("closeCurrent" == json.callbackType) {
close_pop();
} else if ("closeCurrentThenForward" == json.callbackType) {
close_pop();
if (json.forwardUrl) {
location.href = common.ctx + json.forwardUrl;
return;
}
}
}
}
到了这里,就不得不说ajaxUrl这个方法了 (function($){
// DWZ set regional
$.setRegional = function(key,value){
if (!$.regional) $.regional = {};
$.regional[key] = value;
};
$.fn.extend({
initUI: function(){
return this.each(function(){
if($.isFunction(initUI)) initUI(this);
});
},loadUrl: function(url,data,callback){
$(this).ajaxUrl({url:url,data:data,callback:callback});
},ajaxUrl: function(op){
var $this = $(this);
$this.trigger(YUNM.eventType.pageClear);
$.ajax({
type: op.type || 'GET',url: op.url,data: op.data,cache: false,success: function(response){
var json = YUNM.jsonEval(response);
if (json[YUNM.keys.statusCode]==YUNM.statusCode.error){
if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]);
} else {
$this.html(response).initUI();
if ($.isFunction(op.callback)) op.callback(response);
}
},error: YUNM.ajaxError,statusCode: {
503: function(xhr,ajaxOptions,thrownError) {
$.showErr("服务器当前负载过大或者正在维护!" || thrownError);
}
}
});
},});
通过ajax请求,向jfinal端发起请求,然后接收对应的response,根据response状态,我们将对应的页面渲染内容显示到局部DIV中。 jfinal端就很简单了 public void initLoginTip() {
logger.info("初始化登录/退出页面");
render("login_tip.jsp");
}
渲染到对应组件页面就OK了。 说到这,登录的局部刷新就完成了,只要你注意到对应的方法就好了。 点击退出a标签时,登出成功后再次刷新1中的页面,显示“登录”对于退出,你当然还是可以参照jfinal与bootstrap的登出实战。 对于ajaxDone方法,你可以参照dialogAjaxDone方法。 结语:也许,本系列教程,单独来看的话,好像云里雾里的,但是如果你结合整个系列文章的话,或者你改造过DWZ的相关内容,你对本系列文章就一目了然了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |