MIS2000Lab.的「HTML5 認證考試，從零開始」#15-- AJAX ( jQuery )

DAY 15

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 15 篇

ajax javascript html jquery 網頁 json 鐵人賽網頁程式 html5 post get mis2000lab 序列化 xhr xmlhttprequest html

mis2000lab

2014-10-10 00:51:55

4499 瀏覽

分享至

上一篇文章：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. 周棟祥/吳進魯