JavaScript中如何发送POST请求？

在JavaScript中发送POST请求有多种实现方式，不同的方式适用于不同的开发场景，下面将逐一介绍常用的实现方法。

一、使用XMLHttpRequest发送POST请求

XMLHttpRequest是最早的原生请求方式，兼容性较好，支持所有主流浏览器，适合需要兼容旧版本浏览器的场景。

基本的实现步骤如下：

• 创建XMLHttpRequest实例
• 调用open方法设置请求方法和请求地址
• 设置请求头（根据发送的数据类型设置）
• 监听onreadystatechange事件处理响应
• 调用send方法发送请求数据

// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 设置请求方法和地址
xhr.open('POST', 'https://ipipp.com/api/submit');
// 设置请求头，发送JSON数据时需要设置Content-Type
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听请求状态变化
xhr.onreadystatechange = function() {
  // readyState为4表示请求完成，status为200表示请求成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log('请求成功，返回数据：', response);
  }
};
// 准备要发送的数据，转为JSON字符串
const postData = {
  name: '测试用户',
  age: 20
};
// 发送请求
xhr.send(JSON.stringify(postData));

二、使用fetch API发送POST请求

fetch是ES6新增的原生请求API，语法更简洁，基于Promise实现，避免了回调地狱的问题，是目前主流的原生请求方式。

fetch发送POST请求时，需要传入请求配置对象，设置method为POST，同时配置请求头和请求体。

// 使用fetch发送POST请求
fetch('https://ipipp.com/api/submit', {
  method: 'POST', // 设置请求方法为POST
  headers: {
    'Content-Type': 'application/json' // 设置请求头，发送JSON数据
  },
  body: JSON.stringify({ // 设置请求体，需要转为字符串
    name: '测试用户',
    age: 20
  })
})
.then(response => {
  // 判断响应状态是否正常
  if (!response.ok) {
    throw new Error('请求失败，状态码：' + response.status);
  }
  return response.json(); // 解析响应为JSON格式
})
.then(data => {
  console.log('请求成功，返回数据：', data);
})
.catch(error => {
  console.error('请求出错：', error);
});

三、使用axios发送POST请求

axios是一个流行的第三方HTTP请求库，封装了XMLHttpRequest，使用更方便，支持拦截器、取消请求等高级功能，适合中大型项目使用。

使用前需要先引入axios库，如果是通过npm安装，可以用import引入；如果是通过script标签引入，直接使用全局的axios变量即可。

// 使用axios发送POST请求
axios.post('https://ipipp.com/api/submit', {
  name: '测试用户',
  age: 20
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('请求成功，返回数据：', response.data);
})
.catch(error => {
  console.error('请求出错：', error);
});

四、不同数据格式的POST请求处理

发送POST请求时，根据后端接收的数据格式不同，需要设置不同的Content-Type和请求体格式：

五、注意事项

• 发送POST请求时要注意跨域问题，如果请求地址和当前页面域名不同，需要后端配置CORS或者前端使用代理。
• 使用fetch时，即使请求返回4xx、5xx状态码，也不会进入catch回调，需要手动判断response.ok状态。
• 发送FormData格式数据时，不要手动设置Content-Type，否则可能导致边界丢失，后端无法解析数据。
• 敏感数据发送时建议配合HTTPS使用，避免数据在传输过程中被窃取。

以上就是JavaScript中发送POST请求的几种常用方法，开发者可以根据项目的兼容需求、功能需求选择合适的实现方式。

JavaScriptPOST请求fetchXMLHttpRequestaxios修改时间：2026-06-07 03:38:12