关于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 对象。

相关推荐
小二·15 小时前
前端测试体系完全指南:从 Vitest 单元测试到 Cypress E2E(Vue 3 + TypeScript)
前端·typescript·单元测试
pas13615 小时前
18-mini-vue element
前端·vue.js·ubuntu
哟哟耶耶15 小时前
Plugin-webpack内置功能split-chunks-plugin配置打包代码分割
前端·webpack·node.js
青梅主码15 小时前
给 AI 打个分,就能搞出估值17亿独角兽??刚刚完成1.5亿美元A轮融资,这个AI 评测平台彻底火了!LMArena
前端
GUIRH15 小时前
Vue指令
前端
林恒smileZAZ16 小时前
前端技巧:检测到省略号文本自动显示 Tooltip
开发语言·前端·javascript
Zzz不能停16 小时前
阻止冒泡和阻止元素默认行为的区别
开发语言·前端·javascript
攀登的牵牛花16 小时前
前端向架构突围系列 - 架构方法(三):前端设计文档的写作模式
前端·架构
m0_5287238116 小时前
如何避免多次调用同一接口
前端·javascript·vue.js·性能优化
小高00716 小时前
Elips:领域模型与 DSL 设计实践:从配置到站点的优雅映射
前端·javascript·后端