Ajax和SpringBoot实现JSON的传输与接收

最新推荐文章于 2023-03-09 18:43:20 发布

拥有翅膀的猿

最新推荐文章于 2023-03-09 18:43:20 发布

阅读量1.6k

点赞数 2

分类专栏：学习总结文章标签： ajax

本文链接：https://blog.csdn.net/zeng_0825/article/details/108385819

版权

学习总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

无论是前后端分离的项目还是不分离的项目，在进行数据交互的时候我们可以将数据封装成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);
}
}