【JavaScript】发送 POST 请求并带有 JSON 请求体的几种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了【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);
});