【JavaScript】 发送 POST 请求并带有 JSON 请求体的几种方法

 在现代的前端开发中，与后端进行数据交互是必不可少的。其中，发送 POST 请求并带有 JSON 请求体是一种常见的需求。在本文中，我们将介绍在 JavaScript 中实现这一需求的几种方法。

使用 XMLHttpRequest

 XMLHttpRequest 是一种传统的发送网络请求的方式。以下是一个使用 XMLHttpRequest 发送 POST 请求并带有 JSON 请求体的示例：

var xhr = new XMLHttpRequest(); var url = "https://example.com/api"; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () {     if (xhr.readyState === 4 && xhr.status === 200) {         var json = JSON.parse(xhr.responseText);         console.log(json);     } }; var data = JSON.stringify({ key: "value" }); xhr.send(data); 

使用 fetch API

 fetch API 是一种较新的发送网络请求的方式。以下是一个使用 fetch 发送 POST 请求并带有 JSON 请求体的示例：

var url = "https://example.com/api"; var data = { key: "value" }; fetch(url, {     method: 'POST',     headers: {         'Content-Type': 'application/json',     },     body: JSON.stringify(data), }) .then(response => response.json()) .then(json => console.log(json)) .catch(error => console.error('Error:', error)); 

使用 axios

 axios 是一个基于Promise的HTTP库，它有很多有用的特性，如拦截请求和响应、转换请求和响应数据等。以下是一个使用 axios 发送 POST 请求并带有 JSON 请求体的示例：
首先，您需要安装axios：

npm install axios 

然后，您可以这样发送POST请求：

var axios = require('axios'); var url = "https://example.com/api"; var data = { key: "value" }; axios.post(url, data, {     headers: {         'Content-Type': 'application/json'     } }) .then(response => {     console.log(response.data); }) .catch(error => {     console.log('Error:', error); }); 

 以上就是几种在 JavaScript 中发送 POST 请求并带有 JSON 请求体的常见方法。您可以根据具体需求选择适合您的方法。