记录一下前端不同形式传递数据,后端的接收的方式
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只会警告。
为了防止前端传一个空对象 {} 过来, 可以判断一下请求参数实体是否为空。
欢迎评论交流啊