JavaScript POST

1. 在 JavaScript 中使用 XHR(XML HTTP Request) 傳送沒有表單的 POST 資料
2. 在 JavaScript 中使用 Fetch API 傳送沒有表單的 POST 資料
3. 在 JavaScript 中使用 Navigator.sendBeacon() 傳送沒有表單的 POST 資料

本教程講授如何在不使用 JavaScript 表單的情況下傳送 POST 資料。

在 JavaScript 中使用 XHR(XML HTTP Request) 傳送沒有表單的 POST 資料

XHR 是一個物件，用於在 JavaScript 中發出 HTTP 請求。它有助於與伺服器進行互動並在客戶端和伺服器之間交換資料。即使不重新整理整個頁面，我們也可以從伺服器中提取資料。它使使用者僅破壞頁面的一部分就可以繼續工作。我們可以使用這種方法傳送 POST 資料，而無需使用表單。

const URL = 'delftstack.com'
var xhr = new XMLHttpRequest();
xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    name: 'DelftStack'
}));

在 JavaScript 中使用 Fetch API 傳送沒有表單的 POST 資料

JavaScript 提取 API，例如 XHR，有助於將 HTTP 請求傳送到伺服器。但是 XHR 沒有利用承諾，導致程式碼混亂不整潔。要使用 Fetch API，我們必須呼叫 fetch() 方法。它接受以下引數：

• URL：從中請求資料的 API 的 URL。
• object：這是一個物件，用於指定有關所請求型別的其他屬性。它具有 3 個屬性：
  • method：它指定諸如 GET，POST 之類的方法。在這種情況下，其值應為 POST，因為我們正在發出 POST 請求。
  • body：body 物件包含要傳送的資料。
  • headers：這是一個可選引數，可幫助我們對 HTTP 請求和響應標頭執行各種操作。

在 fetch() 方法之後，我們指定諾言方法 then() 和 catch()。如果 fetch() 返回的 promise 是 resolved，則執行 then() 中指定的函式，否則返回的 promise 是 rejected，並呼叫 catch() 內部的函式。

let data = {name: 'DelftStack'};
fetch("https://randomuser.me/api/?results=10", {
  method: "POST", 
  body: JSON.stringify(data)
}).then(res => {
  console.log("Promise resolved", res);
});

在 JavaScript 中使用 Navigator.sendBeacon() 傳送沒有表單的 POST 資料

Navigator.sendBeacon() 方法有助於通過 HTTP 請求將資料非同步傳送到 Web 伺服器。它的主要應用是將網站分析資料傳送到伺服器，但也可以用於傳送 POST 資料。

let data = {name: 'DelftStack'};
navigator.sendBeacon('https://randomuser.me/api/?results=10', data);