JS POST数据的常用方法

JS POST常用两种方式，一个是POST json，一个是POST formData。formData就是我们传统的表单，只是这里用JS拼凑表单数据。

先看formData

// 创建FormData对象
const formData = new FormData();

// 添加文本字段
formData.append('username', '张三');
formData.append('email', 'zhangsan@example.com');

// 添加文件（假设HTML中有一个文件输入框 <input type="file" id="fileInput">）
const fileInput = document.getElementById('fileInput');
if (fileInput.files[0]) {
  formData.append('avatar', fileInput.files[0]);
}

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
  // 注意：不要设置Content-Type头，浏览器会自动设置正确的multipart/form-data格式
})

如果你有现成的HTML表单，在用append一个一个拼凑这样有点累，我们可以用以下方法

// 假设HTML中有一个表单 <form id="myForm">...</form>
const formElement = document.getElementById('myForm');
const formData = new FormData(formElement);

fetch('https://api.example.com/submit', {
  method: 'POST',
  body: formData
})

POST json 就简单一些，但json注意的是：要把json对象转换成json字符串，还要加个json头

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '张三',
    email: 'zhangsan@example.com'
  })
})

如果简单的请求使用fetch就可以了，如果复杂的请求（比如：钩子之类的）使用axios等框架完成。

顺便讲讲后端接收POST过来的数据，我就以hono为例，express其实也差不多。

// 接收POST formData
const app = new Hono()

app.post('/upload', async (c) => {
  const body = await c.req.parseBody()
  console.log(body['file']) // 接受的文件
  console.log(body['name'])// 接受的form
})

// 接收POST json
const app = new Hono()

app.post('/upload', async (c) => {
  const json = await c.req.json()
  console.log(json) // json对象
})

JS 可前可后