這篇文章給大家分享的是有關(guān)JQuery中如何實(shí)現(xiàn)ajax局部刷新的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)的客戶來(lái)自各行各業(yè)，為了共同目標(biāo)，我們?cè)诠ぷ魃厦芮信浜希瑥膭?chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、電商網(wǎng)站開(kāi)發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開(kāi)發(fā)。

JQuery 再談ajax局部刷新。

案例：

描述：

1. 點(diǎn)擊登錄則彈出登錄對(duì)話框
2. 如果用戶名密碼不正確，則提示錯(cuò)誤信息
3. 當(dāng)輸入信息正確，則刷新登錄信息，顯示用戶名和退出按鈕
4. 點(diǎn)擊退出彈出提示信息，然后確定后再次刷新用戶名，回到了第一幅圖片的位置

那這些簡(jiǎn)單的操作，都需要做一些什么工作呢？

1. 加載登錄/（用戶名-退出）的頁(yè)面
2. 點(diǎn)擊登錄連接，打開(kāi)登錄對(duì)話框
3. 登錄form表單提交時(shí)，對(duì)信息進(jìn)行驗(yàn)證。
4. 驗(yàn)證通過(guò)后，關(guān)閉對(duì)話框，同時(shí)刷新1中的頁(yè)面，顯示“用戶名-退出”
5. 點(diǎn)擊退出a標(biāo)簽時(shí)，登出成功后再次刷新1中的頁(yè)面，顯示“登錄”

加載登錄/（用戶名-退出）的頁(yè)面

<div id="login_tip" url="${ctx}/mem/initLoginTip"></div>

1. 給div一個(gè)id，用來(lái)做頁(yè)面索引，使后面能夠定位到此處。
2. 給一個(gè)url屬性，使其在頁(yè)面加載的時(shí)候向jfinal服務(wù)端獲取對(duì)應(yīng)信息，當(dāng)然也就是為了局部刷新獲取頁(yè)面內(nèi)容。

// 有url的div主動(dòng)請(qǐng)求服務(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() {
 }
 });
 }
 });

通過(guò)url來(lái)定位到DIV，然后獲取url，準(zhǔn)備發(fā)起ajax請(qǐng)求。

當(dāng)然ajaxUrl方法先不要去關(guān)注太多，稍后會(huì)進(jìn)一步解釋。

點(diǎn)擊登錄連接，打開(kāi)登錄對(duì)話框

復(fù)制代碼 代碼如下:

<a title="登錄" href="${ctx}/mem/initLogin/${sessionScope.username.username}" rel="external nofollow" target="dialog" width="600">登錄</a>

1. 增加屬性target為dialog屬性，當(dāng)然如果你還沒(méi)有關(guān)注本系列教程，那么你可以回顧一下來(lái)看看怎么通過(guò)a標(biāo)簽打開(kāi)一個(gè)對(duì)話框，看看如何打開(kāi)模態(tài)對(duì)話框。
2. 增加width屬性，設(shè)置對(duì)話框的寬度。

當(dāng)輸入信息正確，則刷新登錄信息，顯示用戶名和退出按鈕

復(fù)制代碼 代碼如下:

<form class="pop_login_form" action="${ctx}/mem/login?callbackType=closeCurrent&rel=login_tip" method="post" onsubmit="return validateCallback(this, dialogAjaxDone)">

1. 這個(gè)form表單的屬性就很關(guān)鍵了，action中增加了兩個(gè)參數(shù)“callbackType=closeCurrent”、“rel=login_tip”，callbackType指定對(duì)話框在登錄成功后要關(guān)閉，而rel則指定關(guān)閉對(duì)話框后刷新的局部對(duì)象。
2. validateCallback你可以參照 jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)，里面有詳細(xì)的介紹。
3. 然后對(duì)于dialogAjaxDone，就需要重點(diǎn)說(shuō)明以下，請(qǐng)看以下內(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) {// 指定對(duì)應(yīng)的div進(jìn)行數(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. 這里請(qǐng)看“if (json.rel) {”中的這串代碼，該處通過(guò)json.rel，獲取a標(biāo)簽上的系列參數(shù)，然后再次調(diào)用ajaxUrl方法，用來(lái)做局部刷新。

到了這里，就不得不說(shuō)ajaxUrl這個(gè)方法了

(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ù)器當(dāng)前負(fù)載過(guò)大或者正在維護(hù)!" || thrownError);
 }
 }
 });
 },

 });

通過(guò)ajax請(qǐng)求，向jfinal端發(fā)起請(qǐng)求，然后接收對(duì)應(yīng)的response，根據(jù)response狀態(tài)，我們將對(duì)應(yīng)的頁(yè)面渲染內(nèi)容顯示到局部DIV中。

jfinal端就很簡(jiǎn)單了

public void initLoginTip() {
 logger.info("初始化登錄/退出頁(yè)面");
 render("login_tip.jsp");
 }

渲染到對(duì)應(yīng)組件頁(yè)面就OK了。

說(shuō)到這，登錄的局部刷新就完成了，只要你注意到對(duì)應(yīng)的方法就好了。

點(diǎn)擊退出a標(biāo)簽時(shí)，登出成功后再次刷新1中的頁(yè)面，顯示“登錄”

對(duì)于退出，你當(dāng)然還是可以參照jfinal與bootstrap的登出實(shí)戰(zhàn)。

對(duì)于ajaxDone方法，你可以參照dialogAjaxDone方法。

感謝各位的閱讀！關(guān)于“JQuery中如何實(shí)現(xiàn)ajax局部刷新”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：JQuery中如何實(shí)現(xiàn)ajax局部刷新
轉(zhuǎn)載來(lái)于：http://aaarwkj.com/article48/jeiehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、定制開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、Google、網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)