HTTP请求入参类型解读

news/2024/11/14 12:43:18/
http://www.w3.org/2000/svg" style="display: none;">

HTTP请求入参类型解读

Content-Type

在HTTP请求中,Content-Type请求头用于指示资源的MIME类型,即请求体的媒体类型。它告诉服务器实际发送的数据类型是什么,以便服务器能够正确地解析和处理这些数据。Content-Type可以有多种值,每种值都对应着不同的媒体类型。以下是一些常见的Content-Type值及其区别:

  1. application/x-www-form-urlencoded
  • 这是最常见的表单数据提交方式,表单数据被编码为键值对,类似于URL的查询字符串(但不需要URL的?前缀)。例如:key1=value1&key2=value2
  • 它通常用于HTML表单的提交,其中enctype属性被设置为application/x-www-form-urlencoded(这是默认值)。
  • 它不支持上传文件。
  1. multipart/form-data
  • 当需要上传文件时,enctype应该被设置为multipart/form-data。这种类型的数据会将表单数据编码为一条消息,其中包含多个部分,每个部分都可以是文本或文件。
  • 它使用分界线(boundary)来分割不同的部分,每个部分都有自己的Content-TypeContent-Disposition(如form-data)等头部信息。
  • 它支持文件上传和二进制数据。
  1. application/json
  • 当请求体是JSON格式的数据时,应使用application/json作为Content-Type。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
  • 它广泛用于AJAX和RESTful API中,以提供和接收结构化的数据。
  1. text/plain
  • 当请求体是纯文本时,可以使用text/plain。这意呀着数据以纯文本形式发送,没有HTML或XML等标记。
  • 它通常用于发送简单的文本消息或日志数据。
  1. text/html
  • 尽管在HTTP请求中不常见(因为HTML通常用于响应体),但在某些情况下,如果客户端想要发送HTML代码给服务器,可能会使用text/html作为Content-Type
  • 这通常不是最佳实践,因为发送HTML代码到服务器可能会带来安全风险。
  1. application/xmltext/xml
  • 当请求体是XML格式的数据时,可以使用application/xmltext/xml。XML是一种标记语言,用于数据的存储和传输。
  • application/xml表示XML数据是应用程序的一部分,而text/xml则更强调数据的文本性质。然而,在实践中,这两者之间的区别并不明显,很多服务器和客户端都能处理这两种类型。

每种Content-Type都对应着不同的数据格式和用途,选择合适的Content-Type对于确保数据被正确解析和处理至关重要。

入参形式

在HTTP请求中,request payload(请求负载)和formData(表单数据)都用于向服务器发送数据,但它们的使用场景和编码方式有所不同。

request payload

https://i-blog.csdnimg.cn/direct/52177a9f47484c1bb9e455e37e712f85.png" alt="在这里插入图片描述" />
request payload 是在发送POST或PUT请求时,请求体(Body)中包含的数据。这个数据可以是JSON、XML等格式,用于向服务器传递复杂的数据结构。当使用application/json作为Content-Type时,请求体中的数据通常就是JSON格式的request payload

特点

  • 适用于发送JSON、XML等结构化的数据。
  • Content-Type通常设置为application/jsonapplication/xml等。
  • 数据不是通过表单提交的方式发送的,因此不直接对应HTML表单。

formData

https://i-blog.csdnimg.cn/direct/fa24c4400d0a491f997c40211dd500af.png" alt="在这里插入图片描述" />
formData是模拟HTML表单数据的一种编码方式,主要用于发送包含文件的请求。当HTML表单的enctype属性设置为multipart/form-data时,表单中的数据就会以formData的格式发送。在AJAX请求中,也可以使用JavaScript的FormData对象来手动构造这样的数据。

特点

  • 适用于需要上传文件的场景。
  • 数据以multipart/form-data 编码方式发送,可以包含多个字段和文件。
  • 字段和文件以Content-DispositionContent-Type等HTTP头部信息分隔。
  • 在JavaScript中,可以通过FormData API构造和发送formData

示例

JavaScript中发送formData
let formData = new FormData();
formData.append('username', 'exampleUser');
formData.append('file', fileInput.files[0]); // 假设fileInput是一个文件输入元素fetch('/upload', {method: 'POST',body: formData,
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中,formData对象包含了一个文本字段username和一个文件file,它们都将以multipart/form-data的格式发送到服务器。

JavaScript中发送JSON作为request payload
let data = {username: 'exampleUser',// 其他字段...
};fetch('/api/data', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中,一个JavaScript对象被序列化成JSON字符串,并作为request payload发送到服务器。这里使用的是application/json作为Content-Type

常见的Request Content Type

发送表单数据FormData

application/x-www-form-urlencodedmultipart/form-data 是两种在HTTP请求中发送表单数据(form data)的常见内容类型(Content-Type)。它们各自有不同的使用场景和特性。

application/x-www-form-urlencoded
  • 使用场景:主要用于发送不包含文件的简单表单数据。当HTML表单的enctype属性未被设置或显式设置为application/x-www-form-urlencoded时,表单数据就会以这种方式发送。
  • 数据编码方式:表单中的每个字段都被编码为key=value的形式,多个字段之间用&字符连接。特殊字符(如空格、标点符号等)会被编码为%XX格式的十六进制数(其中XX是该字符的ASCII码的十六进制表示)。
  • 示例:如果表单包含字段name=Johnage=30,则发送的数据可能看起来像这样:name=John&age=30
  • 限制:由于编码方式和传输格式的限制,这种类型不适合用于发送大量数据或包含二进制数据的文件。
传参示例
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");//参数构造形式
const urlencoded = new URLSearchParams();
urlencoded.append("text", "测试123");
urlencoded.append("name", "lucy");const requestOptions = {method: "POST",headers: myHeaders,body: urlencoded,redirect: "follow"
};fetch("https://dict.youdao.com/keyword/key", requestOptions).then((response) => response.text()).then((result) => console.log(result)).catch((error) => console.error(error));

上面代码中的参数构造形式还可以直接写成以下形式

const urlencoded = "text=测试123&name=lucy" // 等价于 上面的 urlencoded.toString()

如果你的参数是个json对象,可以通过下面的形式转换后,作为formData提交

const params = {"test": "测试123","name": "lucy"
}const urlencoded = Object.keys(params).map(key=>`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join('&')
multipart/form-data
  • 使用场景:主要用于发送包含文件的表单数据。当HTML表单的enctype属性设置为multipart/form-data时,表单数据就会以这种方式发送。
  • 数据编码方式:数据被分割成多个部分(parts),每个部分都包含字段的Content-Disposition(描述字段名和可能的文件名)和Content-Type(描述该部分数据的MIME类型)头部信息。文件内容作为其中一个或多个部分发送,而文本字段则以key=value的形式编码并作为其他部分发送。
  • 示例:一个包含文件和文本字段的表单提交时,请求体可能会包含多个部分,每部分都有自己的头部信息和数据内容。
  • 优势:支持发送大量数据和包含二进制数据的文件,是上传文件的标准方式。

在支持FormData对象的执行环境中,可通过 new FormData来构造表单数据

const myHeaders = new Headers();
myHeaders.append"content-type","multipart/form-data");const formdata = new FormData();
formdata.append("text", "申请开票");
formdata.append("name", "lucy");const requestOptions = {method: "POST",headers: myHeaders,body: formdata,redirect: "follow"
};fetch("https://dict.youdao.com/keyword/key", requestOptions).then((response) => response.text()).then((result) => console.log(result)).catch((error) => console.error(error));

如果当前执行环境不支持FormData对象,可根据FormData的参数形式手工构造,也能达到相应效果。包含文件流的不建议

function generateSimpleId() {return ('----WebKitFormBoundary' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15))
}function jsonToFormData(data, boundary) {let arr = []for (let key in data) {arr.push(`\r\n--${boundary}\r\nContent-Disposition: form-data;name="${key}"\r\n\r\n${data[key]}`)}arr.push(`\r\n--${boundary}--`)return arr.join('')
}const boundary = generateSimpleId()
const myHeaders = new Headers();
myHeaders.append("content-type",`multipart/form-data;boundary=${boundary}`)const params = {"text": "test","name": "lucy"
}
const formdata = jsonToFormData(params,boundary)const requestOptions = {method: "POST",headers: myHeaders,body: formdata,redirect: "follow"
};fetch("https://dict.youdao.com/keyword/key", requestOptions).then((response) => response.text()).then((result) => console.log(result)).catch((error) => console.error(error));
选择哪种类型?
  • 如果你的表单只包含文本字段且不需要上传文件,那么application/x-www-form-urlencoded是一个简单且高效的选择。
  • 如果你的表单需要上传文件,或者包含二进制数据,那么multipart/form-data是必需的。

在JavaScript中,你可以使用FormData对象来构造这两种类型的请求体。FormData对象会自动处理字段的编码和文件的上传,而无需你手动设置Content-Type头部(尽管在某些情况下,你可能需要设置其他头部信息)。当使用fetchXMLHttpRequest等API发送请求时,只需将FormData对象作为请求体(body)即可。

发送payload

application/json

这种json格式传参是POST请求中常用的类型,其传参格式如下

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");const raw = JSON.stringify({"test": "测试123","name": "lucy"
});const requestOptions = {method: "POST",headers: myHeaders,body: raw,redirect: "follow"
};fetch("https://dict.youdao.com/keyword/key", requestOptions).then((response) => response.text()).then((result) => console.log(result)).catch((error) => console.error(error));

http://www.ppmy.cn/news/1501412.html

相关文章

python爬虫的基础知识

1.学习爬虫的好处 提升编程技能:爬虫开发需要掌握编程基础,特别是网络请求、HTML/CSS/JavaScript解析、数据存储和异常处理等技能。通过学习爬虫,你可以巩固和提升你的编程技能,特别是Python等编程语言的应用能力。 数据驱动决策…

android audio不同音频流,(八)music流音量APK按键调整

(1)apk通过,dispatchKeyEvent()函数监测按键事件: //apk onCreate()初始化mAudioManager: mAudioManager (AudioManager) this.getSystemService(this.AUDIO_SERVICE); apk接收到按键事件,执行如下处理&…

Java工厂模式详解:方法工厂模式与抽象工厂模式

Java工厂模式详解:方法工厂模式与抽象工厂模式 一、引言 在Java开发中,设计模式是解决常见软件设计问题的一种有效方式。工厂模式作为创建型设计模式的一种,提供了灵活的对象创建机制,有助于降低代码的耦合度,提高系…

c生万物系列(封装)

为了对c语言进行封装,笔者参考了lw_oopc等开源库,决定使用宏对结构体进行封装。 先说一下大致思想:通过宏,结构体和文件来实现封装。 大概步骤:抽象出类-> 使用lw_oopc库进行封装->定义接口封装底层实现 ->…

Canvas 的进度条操作及代码

canvas需要进度条么?答案显然是肯定的。我们的页面如果放到服务器上,图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话,那么用户肯定看不到理想的效果。 今天和大家探讨canvas动画框架之图片预加载,如上…

【音视频】RTSP、RTMP与流式传输

文章目录 前言RTSP与RTMPRTSP(Real-Time Streaming Protocol)RTMP(Real-Time Messaging Protocol)主要差异 什么是流式传输?流式传输的特点流式传输与传统下载的区别 使用VLC播放RTSP监控 总结 前言 在现代网络环境中…

【解决方案】华普微汽车智能钥匙解决方案

一、方案概述 1.什么是被动式无钥匙进入 "被动式无钥匙进入"(Passive Keyless Entry)是一种用于车辆、建筑物或其他设施的访问控制系统。它利用无线射频技术自动判断用户是否接近,并进行身份识别以执行开锁或落锁动作&#xff0c…

VSCode 命令行使用 git commit 无法输入中文

1. 问题描述 在使用 VSCode 的集成终端(Terminal)进行 git commit -m feat:xxx 操作时,发现 xxx 的位置只能编写英文,无法输入中文或者输入中文后出现问题。 这通常与终端编码设置、VSCode 的配置或者操作系统设置有…