jquery.ajax之beforeSend方法使用介紹
常見的一種效果，在用ajax請(qǐng)求時(shí)，沒有返回前會(huì)出現(xiàn)前出現(xiàn)一個(gè)轉(zhuǎn)動(dòng)的loading小圖標(biāo)或者“內(nèi)容加載中..”，用來告知用戶正在請(qǐng)求數(shù)據(jù)。這個(gè)就可以用beforeSend方法來實(shí)現(xiàn)。
下載demo：ajax loading
代碼如下：
function test_ajax(){
$.ajax(
{
type:"GET",//通常會(huì)用到兩種：GET,POST。默認(rèn)是：GET
url:"a.php",//(默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址
dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
beforeSend:beforeSend, //發(fā)送請(qǐng)求
success:callback, //請(qǐng)求成功
error:error,//請(qǐng)求出錯(cuò)
complete:complete//請(qǐng)求完成
});
}
function error(XMLHttpRequest, textStatus, errorThrown){
// 通常情況下textStatus和errorThown只有其中一個(gè)有值
$("#showResult").append("<div>請(qǐng)求出錯(cuò)啦！</div>");
}
function beforeSend(XMLHttpRequest){
$("#showResult").append("<div><img src='loading.gif' /><div>");
}
function complete(XMLHttpRequest, textStatus){
$("#showResult").remove();
}
function callback(msg){
$("#showResult").append("<div>請(qǐng)求成功，回傳數(shù):"+msg+"<div>");
}
方法beforeSend，用于在向服務(wù)器發(fā)送請(qǐng)求前添加一些處理函數(shù)。這是一個(gè)ajax事件，在ajax請(qǐng)求開始之前就被觸發(fā)，通常允許用戶修改XMLHttpRequest對(duì)象（比如說設(shè)置附加的頭部信息），關(guān)于ajax事件的解釋可參考文檔：http://docs.jquery.com/Ajax_Events
我們還見到一種情況，很多網(wǎng)站在加載內(nèi)容的過程中給出“數(shù)據(jù)加載中，請(qǐng)稍候”的提示，當(dāng)內(nèi)容被加載完畢后顯示內(nèi)容。可以設(shè)置默認(rèn)文本顯示為加載中的提示，當(dāng)內(nèi)容加載完畢時(shí)，我們可以通過ID選擇器，將該標(biāo)簽中的文本替換成最終的內(nèi)容。以此來取代beforeSend，效率更高。
什么時(shí)候用beforeSend，什么時(shí)候用文本替換，取決于ajax請(qǐng)求前后你所展示的DOM元素是否一致，如果你所展示的DOM元素在請(qǐng)求之前已經(jīng)存在，那么通過上述文本替換的方式來處理會(huì)好些，如果除此以外你還需增加其他的需求，那么還是用beforeSend來處理吧。
- 解決jQuery使用append添加的元素事件無效的問題
- jquery?追加元素append、prepend、before、after用法與區(qū)別分析
- jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案
- jQuery 追加元素的方法如append、prepend、before
- jQuery中append、insertBefore、after與insertAfter的簡(jiǎn)單用法與注意事項(xiàng)
- jQuery使用before()和after()在元素前后添加內(nèi)容的方法
- jquery追加元素的所有方法全面深入實(shí)例講解（append、prepend、after、before、wrap等等）
相關(guān)文章
使用jQuery簡(jiǎn)化Ajax開發(fā) Ajax開發(fā)入門
jQuery是一個(gè)可以簡(jiǎn)化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，異步Javascript和XML）編程的Javascript庫(kù)。不同于其他的Javascript庫(kù)，jQuery有他自己的哲學(xué)，使你可以 很簡(jiǎn)單的編寫代碼。2009-10-10
jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能
利用jQuery Datatable和artTemplate組合來做的表格。但是當(dāng)刪除數(shù)據(jù)時(shí)，需要重新加載table里的數(shù)據(jù)。接下來通過本文給大家分享jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能，需要的朋友參考下2017-02-02
【經(jīng)典源碼收藏】jQuery實(shí)用代碼片段(篩選,搜索,樣式,清除默認(rèn)值,多選等)
這篇文章主要介紹了jQuery實(shí)用代碼片段,包括篩選,搜索,樣式,清除默認(rèn)值,多選等多種功能.具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery validate(submitHandler函數(shù))驗(yàn)證通過發(fā)送Ajax(實(shí)例詳解)
這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗(yàn)證通過發(fā)送Ajax，可以用validate框架驗(yàn)證元素，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-10-10
超級(jí)有用的13個(gè)基于jQuery的內(nèi)容滾動(dòng)插件和教程
這篇文章與大家分享13個(gè)超級(jí)有用的 jQuery 內(nèi)容滾動(dòng)插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內(nèi)容以滾動(dòng)方式變化，這是一種在有限的網(wǎng)頁(yè)空間內(nèi)展示更多內(nèi)容的良好方式，而且能吸引用戶注意力。2011-07-07
easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能示例
這篇文章主要介紹了easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能,結(jié)合實(shí)例形式分析了easyUI 后臺(tái)數(shù)據(jù)交互、分頁(yè)與前臺(tái)顯示相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06
jquery中map函數(shù)遍歷數(shù)組用法實(shí)例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實(shí)例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個(gè)自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05
如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化，展示不同區(qū)域的數(shù)據(jù)分布信息，通過本文給大家介紹如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)，需要的朋友參考下吧2016-02-02
這篇文章主要介紹了jQuery限制輸入字符串長(zhǎng)度的方法，實(shí)例講解，非常實(shí)用,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了jQuery的基本概念與高級(jí)編程的簡(jiǎn)單介紹，有需要的小伙伴可以參考下。2015-05-05