JQuery ajax局部刷新实例

1. 这个form表单的属性就很关键了，action中增加了两个参数“callbackType=closeCurrent”、“rel=login_tip”，callbackType指定对话框在登录成功后要关闭，而rel则指定关闭对话框后刷新的局部对象。
2. validateCallback你可以参照 jfinal与bootstrap的登录跳转实战，里面有详细的介绍。
3. 然后对于dialogAjaxDone，就需要重点说明以下，请看以下内容。

MagickPen

在线AI英语写作助手，像魔术师一样在几秒钟内写出任何东西。

下载

function dialogAjaxDone(json) {
 YUNM.ajaxDone(json);
 if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
 if (json.rel) {// 指定对应的p进行数据加载
 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",
 url : url,
 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;
 }
 }
 }
}

1. 这里请看“if (json.rel) {”中的这串代码，该处通过json.rel，获取a标签上的系列参数，然后再次调用ajaxUrl方法，用来做局部刷新。

到了这里，就不得不说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状态，我们将对应的页面渲染内容显示到局部p中。

jfinal端就很简单了

public void initLoginTip() {
 logger.info("初始化登录/退出页面");
 render("login_tip.jsp");
 }

渲染到对应组件页面就OK了。

说到这，登录的局部刷新就完成了，只要你注意到对应的方法就好了。

点击退出a标签时，登出成功后再次刷新1中的页面，显示“登录”

对于退出，你当然还是可以参照jfinal与bootstrap的登出实战。

对于ajaxDone方法，你可以参照dialogAjaxDone方法。

thinkphp+ajax局部刷新点赞

javascript - ajax局部刷新

php页面局部刷新功能的实现方法