iT邦幫忙

DAY 15
4

上一篇文章:http://ithelp.ithome.com.tw/question/10158950

上一篇文章提到 JavaScript寫AJAX,XHR,XmlHttpRequest

這篇文章要分享的是 jQuery的寫法。

jQuery提供了ajax()函式比前面提及的XMLHttpReqyest物件更好操作。

原理雷同,但程式碼與步驟更簡潔。

==== jQeury傳遞非同步的要求 ====

$.get(url網址, body, function名稱);
// 第一個參數是URL網址。
// 第二個參數body是選填、非必要參數。
// 第三個參數是AJAX callback之後要執行的function名稱。

您也可以改用post來做,取代get。在此不贅述。

如果要處理JSON資料,請用$.getJSON()方法。參數跟前面相同,不過專門處理callback傳回的JSON格式,而非純文字。

$.getJSON(url網址, body, function名稱);
// 第一個參數是URL網址。
// 第二個參數body是選填、非必要參數。
// 第三個參數是AJAX callback之後要執行的function名稱。

==== 使用ajax()函式 ====

jQuery的ajax()函式新創一個XMLHttpRequest物件、傳遞要求(request)與接收「非同步」的回應(asynchronous responses)。如果執行成功,就會執行done()函式,失敗就會執行fail()函式。

$.ajax({
url: '/luckydip/enter',
type: 'GET',
timeout: 12000,  //單位:毫秒。
dataType: 'text'

}).done(function( responseText ){
$('#answer').text( responseText );
// 註解:把成功後的回應寫在<div id=”answer”>...</div>裡面。

}).fail(function() {
alert('錯誤!請您務必填寫資料!');
});

// 註解:本程式碼將會從 /luckydip/enter這段URL網址,傳回一個文字格式的資料。傳回值將會呈現在網頁中某一個id名為answer的元素(HTML標籤)裡面。
更完整的資訊請看 http://api.jquery.com/jquery.ajax/

==== 用jQuery將表單資料序列化(serializing)====

延續前面的範例並修改如下。我們使用**$.ajax()函式**送出表單資料給遠端的Server,

使用HTTP POST方法並加入JSON格式的data屬性

以便將資料以參數列表(parameter list)的方式傳遞出去。

$.ajax({
url: '/luckydip/enterWithName',
type: 'POST',
timeout: 12000,  //單位:毫秒。
dataType: 'text'
data: {
firstName: myForm.fname.value,
lastName: myForm.lname.value
});
});

另外兩種作法

.serialize()方法,如同查詢字串(Query String)的文字格式產生一系列的「欄位」與「值」。

.serializeArray()方法,產生JSON格式的陣列來表示「欄位」與「值」。

下一篇文章 http://ithelp.ithome.com.tw/question/10159336

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#14--AJAX ( XHR,XmlHttpRequest)
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#16--使用JavaScript建構物件與方法
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言