這篇文章給大家分享的是有關(guān)JQuery中如何實現(xiàn)ajax局部刷新的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)的客戶來自各行各業(yè),為了共同目標(biāo),我們在工作上密切配合,從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位,感謝他們對我們的要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。
JQuery 再談ajax局部刷新。
案例:
描述:
1. 點擊登錄則彈出登錄對話框
2. 如果用戶名密碼不正確,則提示錯誤信息
3. 當(dāng)輸入信息正確,則刷新登錄信息,顯示用戶名和退出按鈕
4. 點擊退出彈出提示信息,然后確定后再次刷新用戶名,回到了第一幅圖片的位置
那這些簡單的操作,都需要做一些什么工作呢?
1. 加載登錄/(用戶名-退出)的頁面
2. 點擊登錄連接,打開登錄對話框
3. 登錄form表單提交時,對信息進(jìn)行驗證。
4. 驗證通過后,關(guān)閉對話框,同時刷新1中的頁面,顯示“用戶名-退出”
5. 點擊退出a標(biāo)簽時,登出成功后再次刷新1中的頁面,顯示“登錄”
加載登錄/(用戶名-退出)的頁面
1. 給div一個id,用來做頁面索引,使后面能夠定位到此處。
2. 給一個url屬性,使其在頁面加載的時候向jfinal服務(wù)端獲取對應(yīng)信息,當(dā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,準(zhǔn)備發(fā)起ajax請求。
當(dāng)然ajaxUrl方法先不要去關(guān)注太多,稍后會進(jìn)一步解釋。
點擊登錄連接,打開登錄對話框
復(fù)制代碼 代碼如下:
1. 增加屬性target為dialog屬性,當(dāng)然如果你還沒有關(guān)注本系列教程,那么你可以回顧一下來看看怎么通過a標(biāo)簽打開一個對話框,看看如何打開模態(tài)對話框。
2. 增加width屬性,設(shè)置對話框的寬度。
當(dāng)輸入信息正確,則刷新登錄信息,顯示用戶名和退出按鈕
復(fù)制代碼 代碼如下: