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

相关推荐
梓言几秒前
tailwindcss构建执行npm exec tailwindcss init -p 报错
前端
哈罗哈皮1 分钟前
龙虾(openclaw)本地快速安装及使用教程
前端·aigc·ai编程
用户23115444530582 分钟前
React中实现“双向绑定”效果的几种方式
前端
HelloReader3 分钟前
Flutter Sliver 高级滚动打造 iOS 通讯录体验(十三)
前端
a11177635 分钟前
程序化几何背景生成器(html 开源)
前端·开源·html
浮笙若有梦1 小时前
我开源了一个比 Ant Design Table 更好用的高性能虚拟表格
前端·vue.js
一只程序熊1 小时前
vite-cool-unix-ctx] Unexpected token l in JSON at position 0
java·服务器·前端
张元清1 小时前
React Hooks vs Vue Composables:2026 年全面对比
前端·javascript·面试
yuki_uix1 小时前
从三个自定义 Hook 看 React 状态管理的设计思想
前端·javascript
大漠_w3cpluscom1 小时前
如何在 clamp() 中使用 auto 值
前端·css·html