JQuery ajax局部刷新實例-js教程-PHP中文網

在我們開發的時候，我們回時常用到javascript實現頁面局部刷新，本文我們就和大家分享JQuery ajax局部刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下

案例：

JQuery ajax局部刷新實例

描述：

1. 點擊登入則彈出登入對話框
2. 如果使用者名稱密碼不正確，則提示錯誤訊息
3. 當輸入訊息正確，則刷新登入訊息，顯示用戶名和退出按鈕
4. 點擊退出彈出提示信息，然後確定後再次刷新用戶名，回到了第一幅圖片的位置

那這些簡單的操作，都需要做一些工作呢？

1. 載入登入/（使用者名稱-登出）的頁面

2. 點擊登入連接，開啟登入對話框

3. 登入form表單提交時，對資訊進行驗證。
4. 驗證通過後，關閉對話框，同時刷新1中的頁面，顯示「使用者名稱-退出」

5. 點擊退出a標籤時，登出成功後再次刷新1中的頁面，顯示「登入」

載入登入/（使用者名稱-登出）的頁面

登入後複製

1. 給p一個id，用來做頁面索引，讓後面能夠定位到此處。2. 給一個url屬性，使其在頁面加載的時候向jfinal服務端獲取對應信息，當然也就是為了局部刷新獲取頁面內容。

// 有url的p主动请求服务端获取数据 $("p[url]", $p).each(function() { var $this = $(this); var url = $this.attr("url"); if (url) { $this.ajaxUrl({ type : "POST", url : url, callback : function() { } }); } });

登入後複製

透過url來定位到p，然後取得url，準備發起ajax請求。當然ajaxUrl方法先不要去關注太多，稍後會進一步解釋。

點擊登入連接，開啟登入對話框

複製程式碼程式碼如下：##登入

1. 增加屬性target為dialog屬性，當然如果你還沒有關注本系列教程，那麼你可以回顧一下來看看怎麼透過a標籤開啟一個對話框，看看如何開啟模態對話框。2. 增加width屬性，設定對話框的寬度。

當輸入訊息正確，則刷新登入訊息，顯示使用者名稱和登出按鈕

複製程式碼

程式碼如下：

##l' 1. 這個form表單的屬性就很關鍵了，action中增加了兩個參數“callbackType=closeCurrent”、“rel=login_tip”，callbackType指定對話框在登入成功後要關閉，而rel則指定關閉對話框後刷新的局部物件。

2. validateCallback你可以參考 jfinal與bootstrap的登入跳躍實戰，裡面有詳細的介紹。

3. 然後是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) {// 指定对应的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頁面局部刷新功能的實作方法######

以上是JQuery ajax局部刷新實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！