JavaScript请求体[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

JavaScript请求体（Request Body）是HTTP请求中用于向服务器发送数据的核心部分，通常出现在POST、PUT等非幂等请求方法中。它允许客户端将结构化数据（如JSON、表单数据或二进制流）传输到服务器端进行处理。

请求体的主要特点：

位于HTTP请求头之后，用空行分隔
内容类型由Content-Type头部指定
大小不受URL长度限制（与查询参数不同）
适用于敏感数据传输（不在URL中可见）

内容类型[编辑 | 编辑源代码]

常见的请求体内容类型包括：

类型	MIME类型	描述	典型使用场景
JSON	`application/json`	结构化数据交换	API通信
表单数据	`application/x-www-form-urlencoded`	URL编码的键值对	HTML表单提交
多部分表单	`multipart/form-data`	支持文件上传	文件提交表单
纯文本	<text/plain>	无格式文本	简单文本传输
二进制数据	`application/octet-stream`	原始字节流	文件上传

代码示例[编辑 | 编辑源代码]

基础JSON请求[编辑 | 编辑源代码]

// 使用Fetch API发送JSON请求体
async function postUserData(user) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)  // 将对象转为JSON字符串
  });
  return response.json();
}

// 使用示例
const newUser = {
  name: 'Alice',
  age: 28,
  email: 'alice@example.com'
};

postUserData(newUser)
  .then(data => console.log('响应:', data))
  .catch(error => console.error('错误:', error));

输入:

{
  "name": "Alice",
  "age": 28,
  "email": "alice@example.com"
}

可能的输出:

{
  "id": 12345,
  "status": "created",
  "timestamp": "2023-05-20T14:30:00Z"
}

表单数据请求[编辑 | 编辑源代码]

// 发送URL编码的表单数据
async function submitForm(formData) {
  const urlEncoded = new URLSearchParams();
  for (const [key, value] of Object.entries(formData)) {
    urlEncoded.append(key, value);
  }

  const response = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: urlEncoded
  });
  return response.json();
}

// 使用示例
submitForm({
  username: 'alice123',
  password: 'securePassword!'
});

高级主题[编辑 | 编辑源代码]

流式请求体[编辑 | 编辑源代码]

现代JavaScript支持流式请求体，适合处理大文件：

async function uploadLargeFile(file) {
  const readableStream = file.stream();
  const response = await fetch('https://api.example.com/upload', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/octet-stream'
    },
    body: readableStream
  });
  return response.json();
}

请求体格式转换[编辑 | 编辑源代码]

使用FormData对象处理混合内容：

const formData = new FormData();
formData.append('user', JSON.stringify({ name: 'Bob' }));
formData.append('avatar', fileInput.files[0]);

fetch('/profile', {
  method: 'POST',
  body: formData  // 自动设置multipart/form-data
});

实际应用案例[编辑 | 编辑源代码]

电商网站购物车提交[编辑 | 编辑源代码]

典型JSON请求体结构：

{
  "userId": "user123",
  "items": [
    {
      "productId": "prod-456",
      "quantity": 2,
      "price": 19.99
    }
  ],
  "shippingAddress": {
    "street": "123 Main St",
    "city": "Metropolis"
  },
  "paymentMethod": "credit_card"
}

文件上传进度追踪[编辑 | 编辑源代码]

结合XMLHttpRequest显示上传进度：

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  
  xhr.upload.onprogress = (event) => {
    const percent = Math.round((event.loaded / event.total) * 100);
    console.log(`上传进度: ${percent}%`);
  };
  
  xhr.onload = () => {
    console.log('上传完成');
  };
  
  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}