关于content-type的理解

一.content-type的结论

告诉后端传过去的数据是什么类型的数据

二.没有请求体

(1)没有请求体的情况下content-type没有意义。

(2):图示

里面是没有请求体的

(3)有请求体的情况

二.常见的三种方式

(1)application/x-www-form-urlencoded(默认)

参数的表现形式:

传递之前可以转换

(2)application/json

以json的格式进行展示

(3)multipart/form-data

通常传递文件的形式使用。

FormData 是一个用于构建表单数据的 Web API 接口,可以方便地将表单数据转换为 key-value 格式发送至后端服务器。

使用 FormData 可以分为以下步骤:

(1)创建一个 FormData 对象。

复制代码
const formData = new FormData();

(2)将表单数据添加到 FormData 对象中。

javascript 复制代码
formData.append('username', 'John');
formData.append('password', '123456');

(3)将 FormData 对象发送到后端服务器。

javascript 复制代码
fetch('/api/login', {
  method: 'POST',
  body: formData,
});

完整代码如下:

javascript 复制代码
const formData = new FormData();
formData.append('username', 'John');
formData.append('password', '123456');
fetch('/api/login', {
  method: 'POST',
  body: formData,
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

注意,使用 FormData 对象时要将请求方法设置为 POST,并且将 FormData 对象作为请求体发送。另外,如果表单中包含文件上传时,可以通过 append() 方法添加 File 对象。

相关推荐
mCell3 小时前
如何零成本搭建个人站点
前端·程序员·github
mCell4 小时前
为什么 Memo Code 先做 CLI:以及终端输入框到底有多难搞
前端·设计模式·agent
恋猫de小郭4 小时前
AI 在提高你工作效率的同时,也一直在增加你的疲惫和焦虑
前端·人工智能·ai编程
少云清4 小时前
【安全测试】2_客户端脚本安全测试 _XSS和CSRF
前端·xss·csrf
银烛木5 小时前
黑马程序员前端h5+css3
前端·css·css3
m0_607076605 小时前
CSS3 转换,快手前端面试经验,隔壁都馋哭了
前端·面试·css3
听海边涛声5 小时前
CSS3 图片模糊处理
前端·css·css3
IT、木易5 小时前
css3 backdrop-filter 在移动端 Safari 上导致渲染性能急剧下降的优化方案有哪些?
前端·css3·safari
0思必得05 小时前
[Web自动化] Selenium无头模式
前端·爬虫·selenium·自动化·web自动化
anOnion5 小时前
构建无障碍组件之Dialog Pattern
前端·html·交互设计