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