jQuery 中的 AJAX POST 請求

今天的文章將介紹 jQuery 中的 AJAX POST 請求。

jQuery 中的 AJAX POST 請求

jQuery 的 AJAX POST 請求執行非同步 HTTP (AJAX) 請求。

語法：

jQuery.ajax( url [, settings ] )
jQuery.ajax( [settings ] )

1. URL 是包含將傳送請求的 URL 的字串。
2. settings 是配置 AJAX 請求的鍵/值對物件。所有設定都是可選的。可以使用 $.ajaxSetup() 為每個選項設定預設值。

$.ajax() 函式是所有通過 jQuery 分派的 AJAX 請求的基礎。一次呼叫這個特性通常是沒有用的，因為有許多更高階別的選項，如 $.Get() 和 .load() 可用且更易於應用。

如果更少，則需要常用選項，儘管可以更靈活地使用 $.ajax()。

從 jQuery 1.5 開始，通過 $.ajax() 返回的 jQuery XMLHttpRequest (jqXHR) 物件是瀏覽器本地 XMLHttpRequest 元素的超集。例如，它包含 responseText 和 responseXML 房屋，以及 getResponseHeader() 技術。

雖然交付機制與 XMLHttpRequest 不同（例如，JSONP 請求的指令碼標籤），jqXHR 項在可行的情況下模擬原生 XHR 功能。

從 jQuery 1.5.1 開始，jqXHR 物件還帶有 overrideMimeType() 方法（它在 jQuery 1.4.X 中也發生了變化，但在 jQuery 1.5 中被暫時刪除）。例如，可以在 beforeSend() 回撥函式中使用 .overrideMimeType() 技術來更改響應的 Content-Type 標頭。

對 $.Ajax() 呼叫的不同響應在傳遞給成功處理程式之前要經過特定型別的預處理。可用的資訊種類是 text、HTML、XML、JSON、JSONP 和 script。

data 選項可以以 key1=value1&key2=value2 形式的查詢字串或 {key1: 'value1', key2: 'value2'} 形式的物件傳送資料。

由於瀏覽器安全限制，大部分 AJAX 請求都屬於同源覆蓋；該請求無法有效地從不同的域、子域、埠或協議中檢索事實。

在 .ajax() 文件中查詢更多資訊。

讓我們通過以下示例來理解它。以下程式碼不能按原樣執行並且沒有輸出。

必須將其新增到現有程式碼中才能檢視輸出。

<form id="myForm">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" value="Smith" />
    <input type="submit" value="Send" />
</form>

$("#myForm").submit(function(event){
  event.preventDefault();
  $.ajax({
    method: "POST",
    url: "/open/hello-world",
    data: { name: "Smith", location: "Doe" }
  }).done(function( msg ) {
      alert( "Data Saved: " + msg );
  });
})

一旦使用者提交了上面示例中的表單，就會使用指定的 URL 和引數將 AJAX 呼叫傳送到伺服器。當伺服器返回成功訊息時，你可以在控制檯上列印該訊息或使用適當的訊息通知使用者。