共计 4048 个字符,预计需要花费 11 分钟才能阅读完成。
有时候, 我真会被传参搞得头晕, 这样传要怎么接收, 那样传又要怎么接收? get 可以 json 吗? 什么是 json 方式提交? 等等问题, 已困扰我许久 所以, 在此想做个总结, 整理一下思绪, 不再为传收参烦恼!如有错误, 望联系纠正, 感谢!
首先梳理一下 HTTP 的一些知识
1.GET 和 POST 请求, 在传参方面有什么区别
GET 传输的数据存储在 URL 上进行拼接 POST 传输的数据存储在 Requst Body(请求体) 中
2.http 请求的中 Content-Type
http 的请求头和响应头中都有 Content-Type 字段, 这个字段向我们说明了请求和响应的 HTTP body(请求体或响应体) 存储了什么类型的数据,然后客户端和服务端就可以根据 http 头部得 Content-Type 正确解码 HTTP body 内容。
关联第 1 点:GET 方式的请求和 Content-Type 是没有任何关系的, 因为 GET 请求的数据在 URL 上。
好叻,进入正题。这里我们分为 3 种情况说明如何传参与接参, 分别为 GET 方式请求、表单提交、Json 提交
1.GET 方式请求
(1). 普通 URL get 请求
http://localhost:8080/ajaxGet?id=1&username= 用户名 &userTrueName= 真实姓名
//get 也可以传 json, 通过参数传 json 字符串, 然后后端进行解析 (不过一般都不这么做)
http://localhost:8080/ajaxGet?user={“id”:”1″,”username”:” 用户名 ”,”userTrueName”:” 真实姓名 ”}
(2). 表单类 GET 请求
<form id=”fromGet” action=”fromGet” method=”GET”>
<input type=”text”name=”id” value=”1″>
<input type=”text”name=”username” value=” 用户名 ”>
<input type=”text” name=”userTrueName” value=” 真实名字 ”>
</form>
(3).AJAX Get 请求
(A) 正确示例
$.ajax({
type: “GET”,
url: “http://localhost:8080/ajaxGet”,
data:{“id”:1,”username”:” 用户名 ”,”userTrueName”:” 真实名称 ”},
//contentType:’application/x-www-form-urlencoded’
contentType:’application/json’
});
注意:
1.data 必须为 json 对象
2. 实际上无需设置 contentType
示例中我故意设置了 contentType, 但其实不管设置成什么都是无效的, 因为传输的数据会在发送请求时, 对 Json 对象进行编码解析, 拼接到 URL 上, 如下图
(B) 错误示例 (data 为 json 字符串)
//data 为 json 字符串
$.ajax({
type: “GET”,
url: “http://localhost:8080/ajaxGet”,
data:JSON.stringify({“id”:1,”username”:” 用户名 ”,”userTrueName”:” 真实名称 ”}),
//contentType:’application/x-www-form-urlencoded’
contentType:’application/json’
});
GET 请求时,data 不能使用 json 字符串, 无法解析, 如下图
SpringMvc 接收参数方式
1. 实体类接收 2.Map 接收, 必须使用 @RequestParam 注解 3. 拆开单个参数接收 (参数少的情况可使用)
2.Form 表单提交
ps: 针对 POST, 第一点包含了所有 GET 请求方式
form 表单提交一般说的是 content-type 为 x -www-form-unlencoded 或 multipart/form-data 的请求
(1) 传统 form 表单提交, 默认 content-type 为 x-www-form-unlencoded, 如下
<form id=”fromPost” action=”fromPost” method=”POST”>
<input type=”text”name=”id” value=”1″>
<input type=”text”name=”username” value=” 用户名 ”>
<input type=”text” name=”userTrueName” value=” 真实名字 ”>
</form>
(2) 含文件的 form 表单, 需要指明 enctype 为 multipart/form-data(enctype 相当于 content-type)
<form id=”fromMutli” action=”fromMutli” enctype=”multipart/form-data” method=”POST”>
<input type=”text”name=”id” value=”1″>
<input type=”file” name=”file”>
</form>
(3) Ajaxform 表单提交
//data 为 json 对象
$.ajax({
type: “POST”,
url: “http://localhost:8080/ajaxPost”,
dataType: ‘json’,
data:{“id”:1,”username”:” 用户名 ”,”userTrueName”:” 真实名称 ”},
contentType:’application/x-www-form-urlencoded’
});
SpringMvc 接收参数方式
1. 实体类接收 2.Map 接收, 必须使用 @RequestParam 注解 3. 拆开单个参数接收 (参数少的情况可使用) 4. 后台的 file 文件需要使用 MultipartFile 类型接收
3.Json 提交
ps: 针对 POST, 第一点包含了所有 GET 请求方式
Json 提交一般说的是 content-type 为 application/json 的请求, 传输的 Json 是 Json 字符串
正确示例
// 注意:data 为 json 字符串 contentType 为 application/json
$.ajax({
type: “POST”,
url: “http://localhost:8080/ajaxPost”,
dataType: ‘json’,
data:JSON.stringify({“id”:1,”username”:” 用户名 ”,”userTrueName”:” 真实名称 ”}),
contentType:’application/json;charset=urf-8′
});
注意:data 为 Json 字符串, 这个很重要
SpringMvc 接收参数方式
必须使用 @RequestBody 注解
1. 字符串接收, 然后对 Json 字符串解析转换
2. 实体类接收
3.Map 接收
如下:
@PostMapping(value = “ajaxPost”)
public void ajaxPost(@RequestBody String param){
JSONObject json = JSON.parseObject(param);
}
@PostMapping(value = “ajaxPost”)
public void ajaxPost(@RequestBody User user){
}
@PostMapping(value = “ajaxPost”)
public void ajaxPost(@RequestBody Map map){
}
总结:
1.GET 请求方式与 Form 提交, 后端 spingMvc 接收参数方式相同, 如下
(1) 实体类接收
(2)Map 接收, 必须使用 @RequestParam 注解
(3) 拆开单个参数接收 (参数少的情况使用)
(4) 后台的 file 文件需要使用 MultipartFil 类型接收(form 表单文件提交)
2.Json 提交
必须使用 @RequestBody 注解
(1) 字符串接收, 然后对 json 字符串解析转换
(2) 实体类接收
(3)Map 接收
3. 建议:
(1) 参数少的查询使用 Get 请求, 参数多可使用 Post
(2) 涉及到数据库的修改操作, 使用 Post 请求
(3)Post 请求统一使用 Json 提交 (即 content-type=application/json), 统一方式方便前后端联调,json 传参灵活
(4) 参数多的, 使用实体类接收, 因为 Map 含有参数的不确定性, 根本看不出你需要的啥参数, 宁愿新建一个实体类接收参数, 可增强代码的可读性
比如使用 swagger api 文档时, 可使用注解标注的实体类对应参数, 但用 map 的话, 你要啥参数, 鬼知道咯~
拓展知识:
@RequestParam 注解
其实使用注解 @RequestParam 就等同于 request.getParamter 获取参数 但 @RequestParam 有更多的用处, 它有以下几个重要属性
(1).value: 前端传参的参数名称, 这个属性可以使得前端参数名字与方法参数名不相同, 使用这个参数进行数据绑定就 ok 了
// 前端传参可以是 ”name” 方法参数中为 ”userName”
// 使用 @RequestParam(“name”) 可将 name 和 userName 进行绑定
// 即可使用 userName 接收 name 的数据
@RequestMapping(“/test”)
public void test(@RequestParam(“name”) String userName)){
}
(2)requried: 表示是否是必须的参数, 默认为 true, 所以加上 @RequestParam, 默认这个参数就是必须的, 如果没有传对应参数会报错
(3)defaultValue: 参数默认值。即设置默认值后,没有传参时, 会赋予参数一个默认值。设置了默认值,就算必须参数不传也不会报错
THANDKS
End –
一个立志成大腿而每天努力奋斗的年轻人
伴学习伴成长,成长之路你并不孤单!