jQuery ajax 例子

使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數,可以使簡單的工作變得更加簡單,複雜的工作變得不再複雜。

Ajax 最常見的用法就是把一塊 HTML 代碼加載到頁面的某個區域中去。爲此,只需簡單地選擇所需的元素,然後使用 load() 函數即可。下面是一個用於更新統計信息的示例:

$(‘#stats’).load(’stats.html’);

通常,我們只需簡單地把一些參數傳遞給服務器中的某個頁面。正如您所預料的,使用 jQuery 實現這一操作非常地簡單。您可以使用 $.post() 或者 $.get(),這由所需的方法決定。如果需要的話,您還可以傳遞一個可選的數據對象和回調函數。清單 4 顯示了一個發送數據和使用回調的簡單示例。

清單 4. 使用 Ajax 向頁面發送數據

$.post(’save.cgi’, {

text: ‘my string’,

number: 23

}, function() {

alert(‘Your data has been saved.’);

});

如果您確實需要編寫一些複雜的 Ajax 腳本,那麼需要用到 $.ajax() 函數。您可以指定 xml、script、html 或者 json,jQuery 將自動爲回調函數準備合適的結果,這樣您便可以立即使用該結果。還可以指定 beforeSend、error、success 或者 complete 回調函數,向用戶提供更多有關 Ajax 體驗的反饋。此外,還有一些其它的參數可供使用,您可以使用它們設置 Ajax 請求的超時,也可以設置頁面 “最近一次修改” 的狀態。清單 5 顯示了一個使用一些我所提到的參數檢索 XML 文檔的示例。

清單 5. $.ajax() 使 Ajax 由複雜變簡單

$.ajax({

url: ‘document.xml’,

type: ‘GET’,

dataType: ‘xml’,

timeout: 1000,

error: function(){

alert(‘Error loading XML document’);

},

success: function(xml){

// do something with xml

}

});

當 success 回調函數返回 XML 文檔後,您可以使用 jQuery 檢索這個 XML 文檔,其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當地容易,並且把內容和數據集成到了您的 Web 站點裏面。清單 6 顯示了 success 函數的一個擴展,它爲 XML 中的每個 元素都添加了一個列表項到 Web 頁面中。

清單 6. 使用 jQuery 處理 XML 文檔

success: function(xml){

$(xml).find(‘item’).each(function(){

var item_text = $(this).text();

$(‘ li‘)

.html(item_text)

.appendTo(‘ol’);

});

}

發佈了32 篇原創文章 · 獲贊 5 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章