无论是前后端分离的项目还是不分离的项目，在进行数据交互的时候我们可以将数据封装成XML、JSON等格式进行数据的交互；使用开发项目中最为常见的方式将数据封装成JSON格式传输到后台，前端分别使用axios、Ajax进行JSON 数据的传送，后端使用Spring Boot进行接收，并通过几种常用的注解实现JSON数据的接收。
使用前我们必须要理解什么是JSON对象？什么是JSON字符串？
//首先定义一个JSON对象
1、使用Javascript的方式定义
var jsonObj = { name : 'zhangsan',password:'123456'} //这里定义的对象名要和实体中属性名一致，不然后台接收不到
2、使用vue 定义
var jsonObj = {name: '',password: ''}
jsonObj.name = this.name;
jsonObj.password = this.password;
//定义JSON字符串
var jsonObj = {"name":"zhangsan","password":123456}
//相比已经很明显了，JSON对象的属性名不用打引号，且属性名与实体属性名一致（尽量）
//了解了JSON对象之后，JavaScript提供了两个方法
1、JSON.parse() //将一个JSON字符串转换JavaScript对象
2、JSON.stringify() //将javaScript的值转换成JSON字符串
//例如console.log(JSON.stringify(jsonObj)) {"name":"zhangsan","password":123456}
使用AJax的传送JSON字符串
//ajax 使用异步刷新的原理，只针对页面子模块请求进行刷新，不影响整个页面，提升了与用户的交互性。
//基本语法
1、Jquery --Ajax
var jsonObj = {"name":"zhangsan","password":123456};
$.ajax({
url:"/login",
method:"POST",
dataType:"json",
data:JSON.stringify(jsonObj),
contentType:"application/json",
success:function(res){
//逻辑代码
},
error:function(res){
//逻辑代码
}
})
使用axios传送JSON对象
var jsonObj = {name:'',password:''}
jsonObj.name = this.name;
jsonObj.password = this.password;
axios({
url:"/login",
method:"POST",
contentType:"aplication/json",
dataType:"json",
data:JSON.stringify(jsonObj),
}).then(res => {
//逻辑代码
})
后端接收参数
//1、@RequestParam
//2、@RequestBody
@Controller
public class LoginController {
@PostMapping("/login")
public void login(@RequestParam("username") String username,
@RequestParam("password") String password){
System.err.println(username);
System.err.println(password);
}
//或者
@Controller
public class LoginController {
@PostMapping("/login")
public void login(@RequestBody Map<String,Object> map){
System.err.println(map.get("username"));
System.err.println(map.get("password"));
}
//或者
@Controller
public class LoginController {
@PostMapping("/login")
public void login(@RequestBody User user){
System.err.println(user);
}
}
