核心要點
$.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 本身。
這個例子很好,但它只顯示了可用參數之一的使用。讓我們看看更多代碼!
回調參數可用於通知用戶操作的完成情況。讓我們最後一次更新之前的示例,以使用它。
這次我們假設我們有一個 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中文網其他相關文章!