JQuery的簡介速記Ajax方法

核心要點

• jQuery 簡寫 Ajax 方法提供了一種簡化 Ajax 調用的方法，它使用預設配置為特定目的包裝了 $.ajax() 方法。本文討論的方法包括 load()、$.post() 和 $.get()。
• load() 方法允許從服務器加載數據並將其放入選定的元素中。它使用 URL、可選數據和可選回調函數。此方法可用於異步加載網頁的主要內容。
• $.post() 方法用於向服務器發送 POST 請求，並將數據作為請求正文的一部分發送。此方法非常適合可能導致服務器端狀態發生變化的請求。
• $.get() 方法啟動對服務器的 GET 請求，非常適合服務器始終針對給定參數集返回相同結果的情況，或者用戶需要共享資源的情況。

你是否從未聽說過 Ajax 這個術語？我敢打賭，幾乎所有人的手都放下，貼近身體。 Ajax（最初代表異步 JavaScript 和 XML）是最常用的客戶端方法之一，有助於創建異步網站和 Web 應用程序。

當然可以使用原始 JavaScript 執行 Ajax 調用，但是處理代碼的所有不同部分可能會很麻煩。如果你必須支持像 Internet Explorer 6 這樣的古老瀏覽器，情況更是如此。

幸運的是，jQuery 為我們提供了一套處理這些問題的方法，使我們能夠專注於我們希望通過代碼完成的任務。 jQuery 提供了一個主要方法 $.ajax()，它可以高度配置以適應你的任何需求。它還提供了一套簡寫方法，稱為簡寫方法，因為它們只是具有預設配置的 $.ajax() 方法的包裝器，每個方法都服務於單一目的。

除 $.ajax() 方法外，所有方法都有一個共同點：它們不操作一組 DOM 元素，而是直接從 jQuery 對象調用。因此，我們不會像這樣編寫語句：

$('p').ajax(...);

這將選擇頁面中的所有段落，然後調用 ajax() 方法，而是編寫：

$.ajax(...);

在本文中，我們將討論三個最常用的 jQuery 簡寫方法：load()、$.post() 和 $.get()。

load()

我們將討論的第一個方法是 load()。它使我們能夠從服務器加載數據並將返回的數據（通常是 HTML 代碼）放入選擇匹配的元素中。在實際使用之前，讓我們看看它的簽名：

load(url[, data][, callback])

每個參數的含義如下：

• url：指定要向其發送請求的資源的 URL 的字符串；
• data：一個可選字符串，應該是格式良好的查詢字符串，或者必須作為請求參數傳遞的對象。如果傳遞字符串，則請求方法將為 GET，如果傳遞對象，則請求方法將為 POST。如果省略此參數，則使用 GET 方法；
• callback：Ajax 請求完成後調用的可選回調函數。此函數最多接受三個參數：響應文本、請求的狀態字符串和 jqXHR 實例。在回調函數內部，上下文 (this) 會逐個設置到集合的每個元素。

這看起來很難用嗎？讓我們看一個具體的例子。

假設你的網站中有一個 ID 為 main 的元素，它代表主要內容。我們要做的是異步加載主菜單中鏈接引用的頁面的主要內容，理想情況下，其 ID 為 main-menu。我們只想檢索此元素內部的內容，因為佈局的其他部分不會更改，因此不需要加載它們。

這種方法旨在作為一種增強，因為如果訪問網站的用戶禁用了 JavaScript，他們仍然可以使用通常的同步機制瀏覽網站。我們希望實現此功能，因為它可以提高網站的性能。在此示例中，我們假設菜單中的所有鏈接都是內部鏈接。

使用 jQuery 和 load() 方法，我們可以使用以下代碼完成此任務：

$('p').ajax(...);

等等！你能看出這段代碼有什麼問題嗎？你們中的一些人可能會注意到，這段代碼檢索了引用的頁面的所有 HTML 代碼，而不僅僅是主要內容。執行此代碼會導致類似於有兩個鏡子，一個在另一個前面：你看到一個鏡子在一個鏡子裡面，在一個鏡子裡面，依此類推。我們真正想要的是只加載目標頁面的主要內容。

為了解決這個問題，jQuery 允許我們在指定的 URL 後立即添加一個選擇器。使用 load() 方法的此功能，我們可以將之前的代碼改寫為：

$.ajax(...);

這次我們檢索頁面，然後過濾 HTML 代碼，只注入 ID 為 main 的元素的後代。我們包含了通用選擇器（*），因為我們希望避免在 #main 元素內有 #main 元素；我們只想要 #main 內的內容，而不是 #main 本身。

這個例子很好，但它只顯示了可用參數之一的使用。讓我們看看更多代碼！

使用回調函數與 load()

回調參數可用於通知用戶操作的完成情況。讓我們最後一次更新之前的示例，以使用它。

這次我們假設我們有一個 ID 為 notification-bar 的元素，它將用作……好吧，通知欄。

load(url[, data][, callback])

掌握了 load() 後，讓我們將注意力轉移到下一個方法。

$.post()

有時我們不僅想將服務器返回的內容注入到一個或多個元素中。我們可能想要檢索數據，然後在檢索數據後決定如何處理它。為此，我們可以使用 $.post() 或 $.get() 方法。

它們在功能上相似（向服務器發出請求），並且在簽名和接受的參數方面相同。唯一的區別是，一個發送 POST 請求，另一個發送 GET 請求。很明顯，不是嗎？

如果你不記得 POST 請求和 GET 請求之間的區別，如果我們的請求有可能導致服務器端狀態發生變化，從而導致不同的響應，則應使用 POST。否則，它應該是一個 GET 請求。

$.post() 方法的簽名是：

$('p').ajax(...);

參數如下所述：

• url：指定要向其發送請求的資源的 URL 的字符串；
• data：jQuery 將作為 POST 請求的一部分發送的可選字符串或對象；
• callback：請求成功後執行的回調函數。在回調函數內部，上下文 (this) 設置為表示在調用中使用的 Ajax 設置的對象。
• type：一個可選字符串，用於指定如何解釋響應正文。接受的值為：html、text、xml、json、script 和 jsonp。這也可以是多個以空格分隔的值的字符串。在這種情況下，jQuery 將一種類型轉換為另一種類型。例如，如果響應是文本，而我們希望將其視為 XML，我們可以編寫“text xml”。如果省略此參數，則響應文本將不進行任何處理或評估就傳遞給回調函數，並且 jQuery 會盡力猜測正確的格式。

現在你知道了 $.post() 可以做什麼以及它的參數是什麼，讓我們編寫一些代碼。

假設我們有一個要填寫的表單。每次字段失去焦點時，我們都希望將字段數據發送到服務器以驗證其有效性。我們將假設服務器以 JSON 格式返回信息。一個典型的用例是驗證用戶選擇的用戶名是否尚未被佔用。

為了實現此功能，我們可以使用 jQuery 的 $.post() 方法，如下所示：

$.ajax(...);

在此代碼中，我們向由相對 URL“/user”標識的頁面發送 POST 請求。我們還使用第二個參數 data 向服務器發送失去焦點的字段的名稱和值。最後，我們使用回調函數來驗證返回的 JSON 對象的 status 屬性的值是否為 error，在這種情況下，我們將錯誤消息（存儲在 message 屬性中）顯示給用戶。

為了讓你更好地了解這種類型的 JSON 對象可能是什麼樣子，這裡有一個示例：

load(url[, data][, callback])

正如我所說，除了能夠發出 GET 請求外，$.get() 與 $.post() 相同。因此，下一節將非常簡短，我將關註一些用例，而不是重複相同的信息。

$.get()

$.get() 是 jQuery 提供的發出 GET 請求的方法之一。此方法使用指定的 URL 和提供的可選數據向服務器啟動 GET 請求。請求完成後，它還可以執行回調函數。其簽名如下：

$('p').ajax(...);

參數與 $.post() 方法的參數相同，因此我不會在這裡重複它們。

$.get() 函數非常適合服務器始終針對給定參數集返回相同結果的情況。對於你希望用戶能夠共享的資源，它也是一個不錯的選擇。例如，對於交通服務（如火車時刻表信息），人們搜索相同的日期和時間必須獲得相同的結果，GET 請求是理想的選擇。此外，如果頁面能夠響應 GET 請求，用戶就可以與朋友共享獲得的結果——URL 的魔力。

結論

在本文中，我們討論了一些 jQuery 最常用的 Ajax 簡寫方法。它們是執行 Ajax 請求的非常方便的方法，正如我們所看到的，在其基本版本中，只需一行代碼就可以實現我們想要的功能。

請查看 jQuery 的 Ajax 簡寫文檔，以了解有關這些方法和其他方法的更多信息。儘管我們在這裡沒有討論其他內容，但你應該能夠利用你在本文中獲得的知識來開始使用其他方法。

(此處應添加常見問題解答部分，內容與輸入文本中的常見問題解答部分相同)

以上是JQuery的簡介速記Ajax方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！