JavaScript POST

  1. 使用 XHR(XML HTTP Request) 在 JavaScript 中发送没有表单的 POST 数据
  2. 使用 FetchAPI 在 JavaScript 中发送没有表单的 POST 数据
  3. 在 JavaScript 中使用 Navigator.sendBeacon() 发送没有表单的 POST 数据

本教程讲授如何在不使用 JavaScript 表单的情况下发送 POST 数据。

使用 XHR(XML HTTP Request) 在 JavaScript 中发送没有表单的 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'
}));

使用 FetchAPI 在 JavaScript 中发送没有表单的 POST 数据

JavaScript 提取 API,例如 XHR,有助于将 HTTP 请求发送到服务器。但是 XHR 没有利用承诺,导致代码混乱不整洁。要使用 Fetch API,我们必须调用 fetch() 方法。它接受以下参数:

  • URL:从中请求数据的 API 的 URL。
  • object:这是一个对象,用于指定有关所请求类型的其他属性。它具有 3 个属性:
    • method:它指定诸如 GETPOST 之类的方法。在这种情况下,其值应为 POST,因为我们正在发出 POST 请求。
    • bodybody 对象包含要发送的数据。
    • headers:这是一个可选参数,可帮助我们对 HTTP 请求和响应标头执行各种操作。

fetch() 方法之后,我们指定诺言方法 then()catch()。如果 fetch() 返回的 promiseresolved,则执行 then() 中指定的函数,否则返回的 promiserejected,并调用 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);