JQuery 又談ajax局部刷新
JQuery 再談ajax局部刷新。
案例：
描述：
1. 點擊登錄則彈出登錄對話框
2. 如果用戶名密碼不正確，則提示錯誤信息
3. 當輸入信息正確，則刷新登錄信息，顯示用戶名和退出按鈕
4. 點擊退出彈出提示信息，然后確定后再次刷新用戶名，回到了第一幅圖片的位置
那這些簡單的操作，都需要做一些什么工作呢？
1. 加載登錄/（用戶名-退出）的頁面
2. 點擊登錄連接，打開登錄對話框
3. 登錄form表單提交時，對信息進行驗證。
4. 驗證通過后，關(guān)閉對話框，同時刷新1中的頁面，顯示“用戶名-退出”
5. 點擊退出a標簽時，登出成功后再次刷新1中的頁面，顯示“登錄”
加載登錄/（用戶名-退出）的頁面
<div id="login_tip" url="${ctx}/mem/initLoginTip"></div>
1. 給div一個id，用來做頁面索引，使后面能夠定位到此處。
2. 給一個url屬性，使其在頁面加載的時候向jfinal服務(wù)端獲取對應(yīng)信息，當然也就是為了局部刷新獲取頁面內(nèi)容。
// 有url的div主動請求服務(wù)端獲取數(shù)據(jù)
$("div[url]", $p).each(function() {
var $this = $(this);
var url = $this.attr("url");
if (url) {
$this.ajaxUrl({
type : "POST",
url : url,
callback : function() {
}
});
}
});
通過url來定位到DIV，然后獲取url，準備發(fā)起ajax請求。
當然ajaxUrl方法先不要去關(guān)注太多，稍后會進一步解釋。
點擊登錄連接，打開登錄對話框
1. 增加屬性target為dialog屬性，當然如果你還沒有關(guān)注本系列教程，那么你可以回顧一下來看看怎么通過a標簽打開一個對話框，看看如何打開模態(tài)對話框。
2. 增加width屬性，設(shè)置對話框的寬度。
當輸入信息正確，則刷新登錄信息，顯示用戶名和退出按鈕
1. 這個form表單的屬性就很關(guān)鍵了，action中增加了兩個參數(shù)“callbackType=closeCurrent”、“rel=login_tip”，callbackType指定對話框在登錄成功后要關(guān)閉，而rel則指定關(guān)閉對話框后刷新的局部對象。
2. validateCallback你可以參照 jfinal與bootstrap的登錄跳轉(zhuǎn)實戰(zhàn)，里面有詳細的介紹。
3. 然后對于dialogAjaxDone，就需要重點說明以下，請看以下內(nèi)容。
function dialogAjaxDone(json) {
YUNM.ajaxDone(json);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
if (json.rel) {// 指定對應(yīng)的div進行數(shù)據(jù)加載
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標簽上的系列參數(shù)，然后再次調(diào)用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("服務(wù)器當前負載過大或者正在維護!" || thrownError);
}
}
});
},
});
通過ajax請求，向jfinal端發(fā)起請求，然后接收對應(yīng)的response，根據(jù)response狀態(tài)，我們將對應(yīng)的頁面渲染內(nèi)容顯示到局部DIV中。
jfinal端就很簡單了
public void initLoginTip() {
logger.info("初始化登錄/退出頁面");
render("login_tip.jsp");
}
渲染到對應(yīng)組件頁面就OK了。
說到這，登錄的局部刷新就完成了，只要你注意到對應(yīng)的方法就好了。
點擊退出a標簽時，登出成功后再次刷新1中的頁面，顯示“登錄”
對于退出，你當然還是可以參照jfinal與bootstrap的登出實戰(zhàn)。
對于ajaxDone方法，你可以參照dialogAjaxDone方法。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery插件bootstrapValidator表單驗證詳解
這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator表單驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Jquery圖片滾動與幻燈片的實例代碼，需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了jQuery與JS加載事件用法,結(jié)合實例形式分析了jQuery與JS加載事件的執(zhí)行順序與使用技巧,需要的朋友可以參考下2016-09-09
省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼
這篇文章主要為大家詳細紹了省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
從上邊的注釋看，jQuery的源碼結(jié)構(gòu)相當清晰、條理，不像代碼那般晦澀和讓人糾結(jié)2011-11-11
這里以jquery異步獲取的數(shù)據(jù)類型——json對象和字符串為依據(jù)，分別介紹兩種方式獲取到的結(jié)果處理方式2014-07-07
這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
jQuery 在現(xiàn)在的Web開發(fā)項目中扮演著重要角色，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗，讓訪問者對網(wǎng)站留下非常好的印象2012-03-03
jQuery實現(xiàn)Select左右復(fù)制移動內(nèi)容
這篇文章主要介紹了基于jQuery實現(xiàn)Select左右復(fù)制移動內(nèi)容的實現(xiàn)方法，代碼非常簡單，具有參考借鑒價值，需要的朋友參考下2016-08-08
前面我寫過一篇短小的文章，簡要的介紹了下怎樣定義input type=file 的樣式。對于一般的表單，上傳控件較少，這樣的做法確實不錯，既減少了代碼，又美化了樣式2011-10-10