如何在无form标签的情况下用JavaScript实现POST请求传参？

没问题！要在不使用<form>标签的情况下用JavaScript发送POST请求，其实有两种主流的方法，我给你详细拆解一下：

这个方法兼容性拉满，能适配所有现代浏览器甚至一些旧版本，适合需要兼容老环境的场景：

// 准备要传递的参数数据
const postData = {
  name: 'chelsea',
  category: '47',
  createdAt: '2018-04-09'
};

// 创建XHR请求对象
const xhr = new XMLHttpRequest();
// 配置请求：POST方法 + 目标接口地址
xhr.open('POST', '/admin/product', true);
// 设置请求头：如果后端接收表单格式数据，用这个
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 如果后端接受JSON格式，换成下面这行：
// xhr.setRequestHeader('Content-Type', 'application/json');

// 监听请求完成事件，处理响应
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，这里可以处理后端返回的结果
    console.log('请求成功:', xhr.responseText);
  } else {
    // 请求失败，捕获错误信息
    console.error('请求失败:', xhr.statusText);
  }
};

// 处理网络层面的错误
xhr.onerror = function() {
  console.error('网络异常，无法发送请求');
};

// 把数据转成对应格式发送：表单格式就转成键值对字符串；JSON格式就用JSON.stringify
const formEncodedData = Object.keys(postData)
  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(postData[key])}`)
  .join('&');
xhr.send(formEncodedData);
// 如果是JSON格式，替换成这行：
// xhr.send(JSON.stringify(postData));

Fetch是ES6+推出的API，写法更优雅，基于Promise，推荐在现代项目中使用：

const postData = {
  name: 'chelsea',
  category: '47',
  createdAt: '2018-04-09'
};

fetch('/admin/product', {
  method: 'POST',
  headers: {
    // 根据后端要求选择合适的Content-Type
    'Content-Type': 'application/x-www-form-urlencoded',
    // 后端接受JSON的话就用这个：
    // 'Content-Type': 'application/json',
  },
  body: Object.keys(postData)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(postData[key])}`)
    .join('&')
  // JSON格式的话，body替换成：
  // JSON.stringify(postData)
})
.then(response => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.text(); // 如果后端返回JSON，就用response.json()
})
.then(data => {
  console.log('请求成功:', data);
})
.catch(error => {
  console.error('请求出错:', error);
});

额外小提示 #

• 一定要和后端开发确认好数据接收格式：别自己瞎选格式，不然后端拿不到数据就尴尬了。
• 如果要传文件或者复杂表单数据，可以用FormData对象，不用手动编码，浏览器会自动处理请求头和格式：

  const formData = new FormData();
  formData.append('name', 'chelsea');
  formData.append('category', '47');
  formData.append('createdAt', '2018-04-09');
  // 然后在Fetch或XHR里直接发送formData就行
  

内容的提问来源于stack exchange，提问作者moses toh