js前端 发送post请求中 http中 query string paramter、form data和request playload的区别

前话：今天在调试API接口的时候，要求发送post请求，请求API地址格式如下http:xxxxx.com/api?param1=value1&param2=value2。当开始请求的时候返回的结果一直报错，报错如下

报错：Required String parameter ‘userName’ is not present
后来发现是把参数写到form data中了，所以报错。所以就来提一下post请求中query string paramter、form data和request playload的区别

一、query string paramter

在发送get或者post请求的时候，如果把参数直接写到地址后面的话，参数就会出现在query string paramter字段中。例如下面例子

axios.get("https://www.baidu.com?name=value").then((res)=>{
				console.log(res);
			})

上面的例子向百度进行了get请求并传入参数，这样name和value就会出现在http中的query string paramter字段中。如下图

如果是post请求也是如此，例如下面

 axios.post("http://xxx.com/xxx/xxx/api?userName=xxxx&type=2",""
			 ).then((res)=>{
			 	console.log(res);
			 }).catch((error)=>{
			 	console.log(error)
			 })

在post请求中还会发现没有提交data数据但是content-type的默认类型是application/x-www-form-urlencoded(常规的HTML页面上的form的Content-type默认值)

二、form data

发送post请求

let result=JSON.stringify(xxx)
			axios.post("http://xxx.com/xxx/xxx/api",result
			).then((res)=>{
				console.log(res);
			}).catch((error)=>{
				console.log(error)
			})

这里没有指定content-type类型，但是默认值是application/x-www-form-urlencoded，所以发送的参数在http请求中form data中

还有就是原生表单提交参数也是在form data中，并且content-type为application/x-www-form-urlencoded，例如

<form action="https://www.baidu.com/" method="post" id="forms">
		    <input type="text" name="username" value="" />
		    <input type="password" name="pwd" value="" />
		    <input type="submit" value="提交"/>
		</form>

或者content-type设置为Content-Type: multipart/form-data时，参数信息也会出现在form data中

三、request playload

在发送post请求的时候，如果content-type字段设置为application/json、text/plain;charset=UTF-8、text/html;charset=UTF-8时 (可能还有其他情况，这里没有全部列举出来) 参数会出现在request playload中

例如下面

let result=JSON.stringify(xxx)
			axios.post("http://xxx.com/xxx/xxx/api",result,
			{
				headers:{
				"Content-Type":"text/plain;charset=UTF-8"
			},
			}
			).then((res)=>{
				console.log(res);
			}).catch((error)=>{
				console.log(error)
			})

注：关于它们之间的字面本意或其他解释参考博客前后端联调之Form Data与Request Payload，你真的了解吗？