当前位置: 乐呵网 > js学习网 > ajax学习 >

jQuery 學習心得筆記 (4) Ajax (上) ericsk.net

时间:2016-10-13 15:41来源:乐呵网提供 作者:乐呵网 点击:
jQuery 學習心得筆記 (4) Ajax (上) 因為是第四篇,所以要介紹四個字的 Ajax!(冷) 在這個號稱 web 2.0 的時代,寫網站,尤其是還用到了大量的 JavaScript,如果與使用者的互動還沒有用到 Aj

jQuery 學習心得筆記 (4) – Ajax (上)

因為是第四篇,所以要介紹四個字的 Ajax!(冷)

在這個號稱 web 2.0 的時代,寫網站,尤其是還用到了大量的 JavaScript,如果與使用者的互動還沒有用到 Ajax 技術的話,似乎是一件很神奇的事,至於 Ajax 是什麼東西?想瞭解的人可以到這裡去看維基百科上的解釋,這篇就專心寫一下 jQuery 中的 Ajax 部份。

產生一個 Ajax 呼叫

我們來把之前的例子翻修成為 Ajax 版本,也就是說,之前的版本是我們把 "Hello" 字樣寫死在 JavaScript 裡,改成使用 Ajax 版本的目標,是希望顯示的字樣從 server 上取得。所以,我們先在 server 上寫一個處理 request 的小程式(這裡用 PHP 作為示範),假設名為 msg.php:



這個 PHP 程式很簡單,任何對 msg.php 的 request,它只回應一個 "Hello" 的字串,所以我們現在要做的事情便是:按下按鈕後,向 server 端的 msg.php 發出一個 request,然後把它回應的東西放在要顯示的地方。所以我們把 showMsg 函式的部份改寫成這樣:


function showMsg(e) {
$(e.target).attr('disabled', true);
$.ajax({
url: 'msg.php',
error: function(xhr) {
alert('Ajax request 發生錯誤');
$(e.target).attr('disabled', false);
},
success: function(response) {
$('#msg').html(response);
$('#msg').fadeIn();
setTimeout(function(){
$('#msg').fadeOut();
$(e.target).attr('disabled', false);
}, 3000);
}
});
}

在這段程式碼中,當我一把按鈕功能關閉時,馬上就利用 jQuery 中的 ajax() 函式來產生一個 Ajax request,注意這裡的寫法是 $.ajax,因為 ajax () 函式是定義在 jQuery 這個物件下,而且不用指定網頁元件(當然你要也是可以),所以可以直接用 jQuery.ajax() 來呼叫使用,不過 jQuery 提供了一個 alias,也就是 $ 相當於 jQuery,所以我通常會把 code 寫成 $.ajax(...) 囉。

而 jQuery.ajax() 函式中需要帶一個 key-value pair 的參數,以此例來說:

所以我把之前做的事都移到了 success 的 callback 函式中,不過值得注意的是:

目前版本(註)的 jQuery/Ajax success callback 帶的參數(code 中的 response)直接就是 server 回應的內容,而不像其它 error/complete callback 帶回來的是一個 XMLHttpRequest 物件。

所以我就直接把 response 塞進 $('#msg') 裡了。

參數傳遞

上面的例子,只有單純作一個 ajax request,如果我們同時要在 Ajax request 時傳一些數值給 server 作處理的話,那就要在 $.ajax() 函式中帶入 data 的參數。我們把之前一直使用的例子再作點修改,傳送兩個參數給 msg.php ,好讓它的回應訊息會根據傳入的參數而有所不同,先在按鈕前加入兩個輸入元件:




#gender 是一個下拉式選單,可以選擇是 Male 或 Female;而 #name 則是一個文字輸入元件,用來輸入名稱,這時我們將 showMsg 再改寫一下 $.ajax 的部份:


$.ajax({
url: 'msg.php',
data: {gender: $('#gender').val(), name: $('#name').val()},
error: function(xhr) { .... },
success: function(response) { ... }
});

這次我們加入了 data 的參數,用意是在作 ajax request 時,帶兩個參數:gender 及 name,這兩個參數的值就是在輸入欄位輸入的值, val() 函式是針對輸入欄位而設計的,它可以抓出目前該輸入欄位所輸入的值。

所以 msg.php 也要做適當的修改以接收 ajax request 所送來的參數:



這樣,若下拉式選單傳遞的是 Male 則回應 "Hello, Mr. XXX" 否則回應 "Hello, Miss XXX"。

回傳資料型態

當 Ajax request 成功後,jQuery 的 ajax 函式會把回應的資料塞給 success 的 callback,這個參數預設是以 HTML 的資料格式來看待,以上述的例子而言,在沒有指定回傳資料型態的情況下,response 預期會是一份 HTML 資料,所以可以直接利用 jQuery 的 html 函式來塞入 HTML 資料。但是如果 server 端程式的回應值不是 HTML 的時候呢?要怎麼改變 response 的資料型態?答案就是在 $.ajax 函式中加入 dataType 的參數來指定。

假設我 server 端的回傳值是一個 JSON 物件,裡面可能只是一個成員是 HTML 資料,那我就不能直接把 response 當成 HTML 來塞了。舉個例子,若 server 端的程式(這裡用 Ruby on Rails 說明)在回應時都以 JSON 來送:


def msg
....
....
render :json => {:success => true, :msg => 'Hello'}.to_json
end

那我的 $.ajax 在呼叫時,就必須要加入 dataType: 'json' 來指定回傳的資料型態為何,這樣 response 就會是一個 JSON object,你可能就會把 success 的 callback 寫成這樣:


...
success: function(response) {
if (response.success) {
$('#msg').html(response.msg);
...
}
...
}

(责任编辑:admin)
------分隔线----------------------------