jQuery 中與Ajax相關的API

標籤：serialize   方法   ==   php檔案   參數   stop   添加   get   number   

注意1.8版本棄用了$.load()函數。

使用getJSON()方法非同步載入JSON格式資料

使用getJSON()方法可以通過Ajax非同步請求的方式，擷取伺服器中的資料，並對擷取的資料進行解析，顯示在頁面中，它的調用格式為：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url參數為請求載入json格式檔案的伺服器位址，可選項data參數為請求時發送的資料，callback參數為資料請求成功後，執行的回呼函數。

例如，點擊頁面中的“載入”按鈕，調用getJSON()方法擷取伺服器中JSON格式檔案中的資料，並遍曆資料，將指定的欄位名內容顯示在頁面中。如所示：

在瀏覽器中顯示的效果：

可以看出，當點擊“載入”按鈕時，通過getJSON()方法調用伺服器中的sport.json檔案，擷取返回的data檔案資料，並遍曆該資料對象，以data[“name”]取出資料中指定的內容，顯示在頁面中。

使用getScript()方法非同步載入並執行js檔案

使用getScript()方法非同步請求並執行伺服器中的JavaScript格式的檔案，它的調用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

參數url為伺服器請求地址，可選項callback參數為請求成功後執行的回呼函數。

例如，點擊“載入”按鈕，調用getScript()載入並執行伺服器中指定名稱的JavaScript格式的檔案，並在頁面中顯示載入後的資料內容，如所示：

在瀏覽器中顯示的效果：

可以看出，當點擊“載入”按鈕調用getScript()方法載入伺服器中的JavaScript格式檔案後，自動執行檔案代碼，將資料內容顯示在

元素中。
使用get()方法以GET方式從伺服器擷取資料

使用get()方法時，採用GET方式向伺服器請求資料，並通過方法中回呼函數的參數返回請求的資料，它的調用格式如下：

$.get(url,[callback])

參數url為伺服器請求地址，可選項callback參數為請求成功後執行的回呼函數。

例如，當點擊“載入”按鈕時，調用get()方法向伺服器中的一個.php檔案以GET方式請求資料，並將返回的資料內容顯示在頁面中，如所示：

在瀏覽器中顯示的效果：


可以看出，通過$.get()方法向伺服器成功請求資料後，在回呼函數中通過data參數傳回請求的資料，並以data.name格式訪問資料中各項的內容。

使用post()方法以POST方式從伺服器發送資料

與get()方法相比，post()方法多用於以POST方式向伺服器發送資料，伺服器接收到資料之後，進行處理，並將處理結果返回頁面，調用格式如下：

$.post(url,[data],[callback])

參數url為伺服器請求地址，可選項data為向伺服器請求時發送的資料，可選項callback參數為請求成功後執行的回呼函數。

例如，在輸入框中錄入一個數字，點擊“檢測”按鈕，調用post()方法向伺服器以POST方式發送請求，檢測輸入值的奇偶性，並顯示在頁面中，如所示：


在瀏覽器中顯示的效果：

可以看出，當點擊“檢測”按鈕時，擷取輸入框中的值，並將該值使用$.post()方法一起發送給伺服器，伺服器接收該值後並進行處理，最後返回處理結果。

使用serialize()方法序列化表單元素值

使用serialize()方法可以將表單中有name屬性的元素值進行序列化，產生標準URL編碼文本字串，直接可用於ajax請求，它的調用格式如下：

$(selector).serialize()

其中selector參數是一個或多個表單中的元素或表單元素本身。

例如，在表單中添加多個元素，點擊“序列化”按鈕後，調用serialize()方法，將表單元素序列化後的標準URL編碼文本字串顯示在頁面中，如所示：


在瀏覽器中顯示的效果：


可以看出，當點擊“序列化”按鈕後，調用表單元素本身的serialize()方法，將表單中元素全部序列化，產生標準URL編碼，各元素間通過&號相聯。

使用ajax()方法載入伺服器資料

使用ajax()方法是最底層、功能最強大的請求伺服器資料的方法，它不僅可以擷取伺服器返回的資料，還能向伺服器發送請求並傳遞數值，它的調用格式如下：

jQuery.ajax([settings])或$.ajax([settings])

其中參數settings為發送ajax請求時的設定物件，在該對象中，url表示伺服器請求的路徑，data為請求時傳遞的資料，dataType為伺服器返回的資料類型，success為請求成功的執行的回呼函數，type為發送資料請求的方式，預設為get。

例如，點擊頁面中的“載入”按鈕，調用ajax()方法向伺服器請求載入一個txt檔案，並將返回的檔案中的內容顯示在頁面，如所示：

在瀏覽器中顯示的效果：

可以看出，當點擊“載入”按鈕時，調用$.ajax()方法請求伺服器中txt檔案，當請求成功時調用success回呼函數，擷取傳回的資料，並顯示在頁面中。

使用ajaxSetup()方法設定全域Ajax預設選項

使用ajaxSetup()方法可以設定Ajax請求的一些全域性選項值，設定完成後，後面的Ajax請求將不需要再添加這些選項值，它的調用格式為：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options參數為一個對象，通過該對象設定Ajax請求時的全域選項值。

例如，先調用ajaxSetup()方法設定全域的Ajax選項值，再點擊兩個按鈕，分別使用ajax()方法請求不同的伺服器資料，並將資料內容顯示在頁面，如所示：

在瀏覽器中顯示的效果：

可以看出，使用ajaxSetup()方法設定了Ajax請求時的一些全域性的配置選項後，在兩次調用ajax請求伺服器txt檔案時，只需要設定url地址即可。

上面圖片有些參數遺漏，下面是一般的格式：

$.ajaxSetup({            url: 'data/check.php',            data: { num: $("#txtNumber").val() },            type: "POST",            dataType: 'text',            success: function(data) {                        }        });

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成後觸發函數。它們的調用格式為：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，兩個方法中括弧都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功後，執行ajaxStop ()方法綁定的函數。

例如，在調用ajax()方法請求伺服器資料前，使用動畫顯示正在載入中，當請求成功後，該動畫自動隱藏，如所示：

在瀏覽器中顯示的效果：


可以看出，由於使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發送Ajax請求時，元素顯示，請求完成時，動畫元素自動隱藏。

注意：該方法在1.8.2下使用是正常的
jquery 1.9+中要使用$(document).ajaxStart(function () {$("#divload").html();})才會生效

jQuery 中與Ajax相關的API