原生 JS 发送带参数 POST 请求：XMLHttpRequest 与 fetch API 实现及注意事项

在原生 JavaScript 中，可以使用 `XMLHttpRequest` 对象或者 `fetch` API 来发送 POST 请求并携带参数。 使用 XMLHttpRequest 对象 ```javascript // 创建 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); // 要请求的 URL const url = 'https://example.com/api'; // 要发送的参数 const params = { name: 'John', age: 30 }; // 将参数对象转换为 URL 编码的字符串 const encodedParams = Object.keys(params) .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key])) .join('&'); // 初始化请求，第一个参数指定请求方法为 POST，第二个参数是请求的 URL xhr.open('POST', url, true); // 设置请求头，告诉服务器请求体的格式是 URL 编码的 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 监听请求状态变化事件 xhr.onreadystatechange = function() { // 当请求完成且状态码为 200 时，表示请求成功 if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; // 发送请求，并将参数作为请求体发送 xhr.send(encodedParams); ``` 使用 fetch API ```javascript // 要请求的 URL const url = 'https://example.com/api'; // 要发送的参数 const params = { name: 'John', age: 30 }; // 配置请求选项 const options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, // 将参数对象转换为 JSON 字符串作为请求体 body: JSON.stringify(params) }; // 发送请求 fetch(url, options) .then(response => { // 检查响应状态是否成功 if (!response.ok) { throw new Error('Network response was not ok'); } // 将响应数据解析为 JSON return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('Fetch error:', error); }); ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 注意请求头的设置，不同的服务器可能要求不同的请求头格式，例如 `Content-Type` 的值要根据实际情况设置。 2. 处理请求错误时要考虑全面，网络错误、服务器返回错误状态码等情况都要进行适当的处理。 3. 对于参数的编码处理要正确，避免因为参数编码问题导致请求失败。 ######[AI写代码神器 | 636点数解答 | 2025-08-20 17:27:16]