HTTP请求方式Method与Content-Type详解及代码示例

作者：异步漫步时间：2026-10-31 15:51:07浏览：660

本文详细解析HTTP请求中的Method与Content-Type。涵盖GET、POST、PUT、DELETE四种常用请求方式及其适用场景，深入讲解application/x-www-form-urlencoded、multipart/form-data、application/json等Content-Type类型的区别与用法，并附带JavaScript fetch API代码示例，帮助开发者准确选择请求类型与数据格式。

HTTP请求中的Content-Type字段用于指定请求体或响应体的数据格式，确保服务器能正确解析客户端发送的数据。

application/x-www-form-urlencoded：这是最传统的表单提交方式，参数以键值对形式编码在请求体中，适用于普通的表单数据提交，使用频率较高。
multipart/form-data：该类型主要用于文件上传场景，同时也支持包含其他键值对数据，是处理二进制文件与文本混合提交的标准方式。
application/json：目前API交互中最常用的数据格式，用于发送JSON字符串，具有结构清晰、易于解析的特点，被广泛支持。
text/plain：用于发送未经过特殊编码的纯文本数据，适用于对格式要求简单的场景。
application/xml 或 text/xml：用于发送XML格式的数据，常见于传统企业级应用或特定Web服务接口中。

在HTTP协议中，常用的请求方式（Method）决定了客户端与服务器交互的具体语义和操作类型。

Get：通常用于从服务器获取数据或执行查询操作。其参数通常通过URL查询字符串进行传递，便于缓存和书签保存。

例如，一个典型的GET请求URL可能构造为：http://example.com/api/resource?key1=value1&key2=value2

// 构造查询字符串,形如：key1=value1&key2=value2
const queryParams = new URLSearchParams();
queryParams.append('key1', 'value1');
queryParams.append('key2', 'value2');
// 构造完整的URL
const url = `http://example.com/api/resource?${queryParams.toString()}`;

// 发送GET请求
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Post：通常用于向服务器提交数据以创建新资源。请求参数放置在请求体中，相比GET方式，Post没有数据长度限制，且参数不暴露在URL中，安全性相对更高。

当使用Post提交JSON数据时，需设置Content-Type为 'application/json'。

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

当使用Post提交传统表单数据时，需设置Content-Type为 'application/x-www-form-urlencoded'。

const queryParams = new URLSearchParams();
queryParams.append('key1', 'value1');
queryParams.append('key2', 'value2');

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: queryParams.toString() 
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

当使用Post进行文件上传时，需设置Content-Type为 'multipart/form-data'。

// JavaScript 发送请求
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', 'This is a test file.');

fetch('/upload', {
  method: 'POST',
  body: formData // 不需要设置Content-Type，FormData会自动设置
})
.then(response => response.json())
.then(data => console.log(data));

Put：通常用于更新服务器上的现有资源。请求参数同样放置在请求体中，语义上表示对资源的完整替换或部分更新。

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch('/api/users', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Delete：通常用于删除服务器上的指定资源。请求参数可以放置在请求体中，也可以直接通过URL路径标识资源ID，具体取决于服务器实现。

// 删除单条记录时
fetch('/api/users/1', {
  method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 删除多条记录时
const ids=[1,2,3,4]
fetch('/api/users', {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(ids)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

作者最新文章

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19

JS对象数组转字符串为什么推荐用JSON.stringify()

2026-11-05 09:40:31