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

相关推荐
JefferyXZF11 分钟前
Next.js Server Actions 详解: 无缝衔接前后端的革命性技术(八)
前端·全栈·next.js
芜青2 小时前
HTML+CSS:浮动详解
前端·css·html
SchuylerEX2 小时前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷3 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技3 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马3 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
unfetteredman3 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵3 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源
山间板栗4 小时前
微信小程序环境变量设置方案
前端
电商API大数据接口开发Cris4 小时前
Java Spring Boot 集成淘宝 SDK:实现稳定可靠的商品信息查询服务
前端·数据挖掘·api