這篇文章給大家分享的是有關(guān)JQuery中如何實(shí)現(xiàn)ajax局部刷新的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián):于2013年成立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù),為近千家公司企業(yè)提供了專業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)和網(wǎng)站推廣服務(wù), 按需制作網(wǎng)站由設(shè)計(jì)師親自精心設(shè)計(jì),設(shè)計(jì)的效果完全按照客戶的要求,并適當(dāng)?shù)奶岢龊侠淼慕ㄗh,擁有的視覺效果,策劃師分析客戶的同行競(jìng)爭(zhēng)對(duì)手,根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架,制作客戶同行業(yè)具有領(lǐng)先地位的。JQuery 再談ajax局部刷新。
案例:
描述:
1. 點(diǎn)擊登錄則彈出登錄對(duì)話框
2. 如果用戶名密碼不正確,則提示錯(cuò)誤信息
3. 當(dāng)輸入信息正確,則刷新登錄信息,顯示用戶名和退出按鈕
4. 點(diǎn)擊退出彈出提示信息,然后確定后再次刷新用戶名,回到了第一幅圖片的位置
那這些簡(jiǎn)單的操作,都需要做一些什么工作呢?
1. 加載登錄/(用戶名-退出)的頁面
2. 點(diǎn)擊登錄連接,打開登錄對(duì)話框
3. 登錄form表單提交時(shí),對(duì)信息進(jìn)行驗(yàn)證。
4. 驗(yàn)證通過后,關(guān)閉對(duì)話框,同時(shí)刷新1中的頁面,顯示“用戶名-退出”
5. 點(diǎn)擊退出a標(biāo)簽時(shí),登出成功后再次刷新1中的頁面,顯示“登錄”
加載登錄/(用戶名-退出)的頁面
<div id="login_tip" url="${ctx}/mem/initLoginTip"></div>
1. 給div一個(gè)id,用來做頁面索引,使后面能夠定位到此處。
2. 給一個(gè)url屬性,使其在頁面加載的時(shí)候向jfinal服務(wù)端獲取對(duì)應(yīng)信息,當(dāng)然也就是為了局部刷新獲取頁面內(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() { } }); } });
通過url來定位到DIV,然后獲取url,準(zhǔn)備發(fā)起ajax請(qǐng)求。
當(dāng)然ajaxUrl方法先不要去關(guān)注太多,稍后會(huì)進(jìn)一步解釋。
點(diǎn)擊登錄連接,打開登錄對(duì)話框
復(fù)制代碼 代碼如下:
<a title="登錄" href="${ctx}/mem/initLogin/${sessionScope.username.username}" rel="external nofollow" target="dialog" width="600">登錄</a>
1. 增加屬性target為dialog屬性,當(dāng)然如果你還沒有關(guān)注本系列教程,那么你可以回顧一下來看看怎么通過a標(biāo)簽打開一個(gè)對(duì)話框,看看如何打開模態(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)說明以下,請(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) {”中的這串代碼,該處通過json.rel,獲取a標(biāo)簽上的系列參數(shù),然后再次調(diào)用ajaxUrl方法,用來做局部刷新。
到了這里,就不得不說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ù)載過大或者正在維護(hù)!" || thrownError); } } }); }, });
通過ajax請(qǐng)求,向jfinal端發(fā)起請(qǐng)求,然后接收對(duì)應(yīng)的response,根據(jù)response狀態(tài),我們將對(duì)應(yīng)的頁面渲染內(nèi)容顯示到局部DIV中。
jfinal端就很簡(jiǎn)單了
public void initLoginTip() { logger.info("初始化登錄/退出頁面"); render("login_tip.jsp"); }
渲染到對(duì)應(yīng)組件頁面就OK了。
說到這,登錄的局部刷新就完成了,只要你注意到對(duì)應(yīng)的方法就好了。
點(diǎn)擊退出a標(biāo)簽時(shí),登出成功后再次刷新1中的頁面,顯示“登錄”
對(duì)于退出,你當(dāng)然還是可以參照jfinal與bootstrap的登出實(shí)戰(zhàn)。
對(duì)于ajaxDone方法,你可以參照dialogAjaxDone方法。
感謝各位的閱讀!關(guān)于“JQuery中如何實(shí)現(xiàn)ajax局部刷新”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)站標(biāo)題:JQuery中如何實(shí)現(xiàn)ajax局部刷新-創(chuàng)新互聯(lián)
鏈接地址:http://bm7419.com/article26/ijsjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、微信公眾號(hào)、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、App開發(fā)
聲明:本網(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í)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容