解读请求方式Method和请求类型Content-Type

更新时间：2024年09月18日 10:19:24 作者：勿语&

HTTP请求中,Content-Type头部用于指定请求体或响应体的类型,常见的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用请求方式包括Get、Post、Put、Delete

1. 请求Content-Type （用来指定请求体或响应体的类型）

application/x-www-form-urlencoded：参数以键值对形式传递，适合普通表单提交。（常用）
multipart/form-data：用于文件上传，也可以包含其他键值对。（常用）
application/json：用于发送JSON格式的数据，广泛应用于API交互。（常用）
text/plain：用于发送纯文本数据。
application/xml 或 text/xml：用于发送XML格式的数据。

2. 常用请求方式

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：常用于新增，请求参数放在请求体中

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));

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));

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中

// 删除单条记录时
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));

总结

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

您可能感兴趣的文章:

新版小程序登录授权的方法
这篇文章主要介绍了新版小程序登录授权的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
详解ES6系列之私有变量的实现
这篇文章主要介绍了详解ES6系列之私有变量的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
JS实现仿PS的调色板效果完整实例
这篇文章主要介绍了JS实现仿PS的调色板效果,结合完整实例形式分析了javascript通过运算与动态操作页面元素实现调色板功能的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-12-12
js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合
js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合，需要的朋友可以参考下。
2011-03-03
js强制把网址设为默认首页
有时候你会发现设首页为失效，那么来一个js强制设置首页的代码，不过为了绿色上网，尽量不要强迫你的用户意志，弄不好网站用户体验会降低。感兴趣的小伙伴可以参考一下
2015-09-09
es6的数字处理的方法（5个）
本文主要介绍了es6的数字处理的方法。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
两种JS实现屏蔽鼠标右键的方法
这篇文章主要介绍了两种JS实现屏蔽鼠标右键的方法，浏览者在访问你网页的时候就不能点击右键，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
JS实现躲避粒子小游戏
这篇文章主要为大家详细介绍了JS实现躲避粒子小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
JS弹出可拖拽可关闭的div层完整实例
这篇文章主要介绍了JS弹出可拖拽可关闭的div层完整实现方法,包括对div弹出层的样式及功能的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
layui监听单元格编辑前后交互的例子
今天小编就为大家分享一篇layui监听单元格编辑前后交互的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09