记录一下前端不同形式传递数据，后端的接收的方式
1. form表单
<form action="/api/user/add" method="POST"> <div class="form-group"> <label for="name">name</label> <input type="text" class="form-control" name="name" id="name" placeholder="用户名"> </div> <div class="form-group"> <label for="age">age</label> <input type="text" class="form-control" name="age" id="age" placeholder="年龄"> </div> <button type="submit" class="btn btn-default">提交</button> </form>
设置action，method设置为post
设置的name和表单的输入值作为value组将成键值对
点击提交按钮
打开chrome浏览器，按f12进入开发者模式，可以看到请求头信息
post在请求头中包含Content-Type: application/x-www-form-urlencoded
可以看到数据是form Data形式
创建对应的实体类User ，成员和name属性对应
@Data//如果直接返回此类型需要加上getter 方法才能被序列化 public class User { private String name; private int age; private String avatar; }
控制器
@Controller @RequestMapping("/api/user") public class UserController { @PostMapping("/add") @ResponseBody//返回json格式数据 public User addUser(User user){ System.out.println("request param1:"+user); return user;//这里仅把请求参数直接返回 } }
or
@Controller @RequestMapping("/api/user") public class UserController { @PostMapping("/add") @ResponseBody//数据以json格式返回 public User addUser(String name,int age){ System.out.println("request param1:"+user); return new User(name,age,null);//这里仅把请求参数直接返回 } }
如果是get请求
参数会像是这样在url上http://localhost:8080/api/user/add?name=%E5%BC%A0%E4%B8%89&age=12
汉字显示为编码后的样子
当需要自定义请求参数的名字时我们可以使用spring注解@RequestParam
@RequestMapping("/add") @ResponseBody public User addUser(@RequestParam("name") String username, @RequestParam("age")int userage){ System.out.println("request param1:"+username); System.out.println("request param2:"+userage); return new User(username,userage,null); }
2. ajax & formdata
<form action="/api/user/add" method="POST"> <div class="form-group"> <label for="name">name</label> <input type="text" class="form-control" name="name" id="name" placeholder="用户名"> </div> <div class="form-group"> <label for="age">age</label> <input type="text" class="form-control" name="age" id="age" placeholder="年龄"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <script> $('button').click(function (e) { e.preventDefault(); var fd = new FormData(); fd.append("name",$('input[name=name]').val()); fd.append("age",$('input[name=age]').val()); console.log(fd.get('name')); console.log(fd.get('age')); $.ajax({ url:"/api/user/add", data: fd, processData: false, contentType: false,//必须 type: 'POST', success: function(data){ alert(data.name); } }); }); </script>
接收方式同上 使用对象或者对应的name作为参数
3. ajax json
$('button').click(function (e) { e.preventDefault();//阻止默认事件 var user = {}; var fd = new FormData(); user.name = $('input[name=name]').val(); user.age = $('input[name=age]').val(); console.log(user); $.ajax({ url:"/api/user/add", data: JSON.stringify(user), processData: false, contentType: 'application/json', type: 'POST', success: function(data){ alert(data.name); } }); });
传递json格式字符串
我们手动设置contentType为'application/json' 此时查看请求，发现数据是这样的
@Controller @RequestMapping("/api/user") public class UserController { @RequestMapping("/add") @ResponseBody public User addUser(@RequestBody User user){ //对应实体类 System.out.println("request param1:"+user); return user; } }
后台接收数据使用@RequestBody注解，就能拿到数据
content-type为 application/json时必须用 @RequestBody否则不会进入后端控制器
而使用form-data时， 则必须不加@RequestBody
或者 ，你也可以使用String 类型，然后自己解析
@RequestMapping("/add") @ResponseBody public User addUser(@RequestBody String user){ //字符串 ObjectMapper mapper = new ObjectMapper(); User u = null; try { u = mapper.readValue(user, User.class); } catch (JsonProcessingException e) { e.printStackTrace(); } System.out.println("request param1:"+u); return u; }
4. path variable
请求地址：/api/app/123
参数： appid = 123
后端接口：
@GetMapping("/api/app/{appid}") public String getApp(@PathVariable String appid){ ... }
参数中包含数组
<h1>用户注册</h1> <form action="/api/user/add" method="POST"> <div class="form-group"> <label for="name">name</label> <input type="text" class="form-control" name="name" id="name" placeholder="用户名"> </div> <div class="form-group"> <label for="age">age</label> <input type="text" class="form-control" name="age" id="age" placeholder="年龄"> </div> <div class="form-group"> <label for="age">friends</label> <div> 周杰伦<input type="checkbox" class="form-control" value="周杰伦" name="friends"> </div> <div> 许嵩<input type="checkbox" class="form-control" value="许嵩" name="friends"> </div> <div> 筷子兄弟<input type="checkbox" class="form-control" value="筷子兄弟" name="friends"> </div> </div> <button type="submit" class="btn btn-default">提交</button> </form> <script> $('button').click(function (e) { e.preventDefault();//阻止默认事件 var user = {}; var fd = new FormData(); user.name = $('input[name=name]').val(); user.age = $('input[name=age]').val(); user.friends = []; $('input[type=checkbox]').each(function () { if($(this).is(':checked')){ user.friends.push($(this).val()); } }) //console.log(user); $.ajax({ url:"/api/user/add", data: JSON.stringify(user), processData: false, contentType: 'application/json', type: 'POST', success: function(data){ alert(data.name); } }); }); </script>
@Data @AllArgsConstructor @NoArgsConstructor public class User { private String name; private int age; private String avatar; private List<String> friends; }
新增friend属性,接收方式不变
参数校验：
添加hibernate-validator依赖
可以在请求实体内加验证注解
e.g
@Data @AllArgsConstructor @NoArgsConstructor public class Account { private String id; @NotNull @Length(max = 20) private String userName; @NotNull @Pattern(regexp = "[A-Z][a-z][0-9]") private String passWord; @DateTimeFormat(pattern = "yyy-MM-dd") private Date createTime; private String alias; @Max(10) @Min(1) private Integer level; private Integer vip; } @PostMapping("/saveAccount") public Object saveAccount(@RequestBody @Valid Account account){ accountService.saveAccount(account); return "保存成功"; }
当请求数据时form-data时,你的请求参数实体是不会为空的（即使前端不传， 对象字段为默认而已）所以不需要加判断
当请求数据时application/json 时,你的请求参数实体 也不用判断一下， 因为不添加body参数，是不会进控制器的，spring只会警告。
为了防止前端传一个空对象 {} 过来， 可以判断一下请求参数实体是否为空。
欢迎评论交流啊
