无论是前后端分离的项目还是不分离的项目，在进行数据交互的时候我们可以将数据封装成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 --Ajaxvar 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@Controllerpublic class LoginController {@PostMapping("/login")public void login(@RequestParam("username") String username,@RequestParam("password") String password){System.err.println(username);System.err.println(password);}//或者@Controllerpublic class LoginController {@PostMapping("/login")public void login(@RequestBody Map<String,Object> map){System.err.println(map.get("username"));System.err.println(map.get("password"));} //或者@Controllerpublic class LoginController {@PostMapping("/login")public void login(@RequestBody User user){System.err.println(user);}}
