【JavaScript】 发送 POST 请求并带有 JSON 请求体的几种方法_js 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);
1
2
3
4
5
6
7
8
9
10
11
12

使用 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));
1
2
3
4
5
6
7
8
9
10
11
12

使用 axios

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

npm install axios
1

然后，您可以这样发送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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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