解读请求方式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));

总结

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

您可能感兴趣的文章:

JavaScript求解最长回文子串的方法分享
这篇文章主要为大家介绍了JavaScript求解最长回文子串的几种方法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2022-08-08
JS中style属性
JS中style属性...
2006-10-10
three.js实现3D影院的原理的代码分析
本篇文章主要给大家讲解了如何通过three.js实现3D影院的功能以及原理分析，需要的朋友参考一下吧。
2017-12-12
利用JS定时器实现元素移动
这篇文章主要为大家详细介绍了利用JS定时器实现元素移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
JavaScript创建对象的七种经典方式分享
JavaScript 创建对象的方式有很多，通过 Object 构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。本文介绍了七种非常经典的创建对象的方式，希望对大家有所帮助
2022-11-11
详解JavaScript原型对象的this指向问题
这篇文章主要为大家介绍了JavaScript原型对象的this指向问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
A标签触发onclick事件而不跳转的多种解决方法
一个标签仅仅是要触发onclick行为，遇到了A标签触发onclick事件时不执行跳转，下面与大家分享下四种解决方法，感兴趣的朋友可以参考下哈
2013-06-06
JS控制按钮10秒钟后可用的方法
这篇文章主要介绍了JS控制按钮10秒钟后可用的方法,涉及JavaScript基于时间函数控制页面元素样式动态变换的技巧,需要的朋友可以参考下
2015-12-12
原生JS实现相邻月份日历
这篇文章主要介绍了原生JS如何实现相邻月份日历，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-10-10
微信小程序分包流程步骤超详细讲解
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,下面这篇文章主要给大家介绍了关于微信小程序分包流程步骤的相关资料,需要的朋友可以参考下
2024-03-03