js原生post请求接口

### 使用 JavaScript 原生方法发送 POST 请求 以下是通过原生 JavaScript 向 API 接口发送 POST 请求的两种主要方式：`XMLHttpRequest` 和 `fetch`。 #### 方法一：使用 XMLHttpRequest 发送 POST 请求 此方法适用于大多数现代浏览器以及部分旧版浏览器。以下是一个完整的示例： ```javascript // 创建 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); // 支持现代浏览器 } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容 IE5/IE6 } // 配置请求 xhr.open('POST', 'https://example.com/api', true); // 设置为异步模式 xhr.setRequestHeader('Content-Type', 'application/json'); // 定义请求头 // 处理响应 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // readyState=4 表示完成, status=200 表示成功 console.log(JSON.parse(xhr.responseText)); // 解析返回的数据 } }; // 发送数据 let data = JSON.stringify({ key: "value" }); // 将对象转换为 JSON 字符串 xhr.send(data); ``` 上述代码展示了如何配置并发送一个带有 JSON 数据体的 POST 请求[^1]。需要注意的是，在设置请求头时，指定了 `'Content-Type'` 的值为 `'application/json'`，这表明我们正在传递 JSON 格式的主体内容。 --- #### 方法二：使用 Fetch API 发送 POST 请求 Fetch 是一种更现代化的方式，语法更加简洁直观。它基于 Promise 设计，因此可以轻松处理异步操作。 ```javascript // 构造请求参数 let postData = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: "value" }) // 转换为字符串形式 }; // 执行 fetch 请求 fetch('https://example.com/api', postData) .then(response => response.json()) // 将响应解析为 JSON .then(data => console.log(data)) // 输出接收到的数据 .catch(error => console.error('Error:', error)); // 错误捕获 ``` 这段代码同样实现了向指定 URL 提交 POST 请求的功能，并且能够自动处理跨域资源共享等问题[^4]。相比传统的 `XMLHttpRequest` 方式，`fetch` 更加语义化和易于维护。 --- ### 总结 无论是采用经典的 `XMLHttpRequest` 还是新兴的 `fetch` 技术，都可以满足日常 Web 开发中的需求。对于简单的场景推荐优先考虑 `fetch`，因为它具有更好的可读性和灵活性；而对于需要支持老旧浏览器或者复杂逻辑的情况下，则可以选择传统方案[^3]。