SpringBoot向后台传参的若干种方式

前言

说到传参肯定大家都不陌生，从事开发的更可以可以说是天天遇到了，这篇文章也就是主要记录以下传参的各种方式，因为经常使用的是SpringBoot来开发，所以就拿SpringBoot来举例，记录前端向后端传参的若干种方式。

普通传参(前端参数与后端形参名称一致)

前端代码：

var param = {
    "name" : "张三"
}
$('#btn').click(function () {
    $.ajax({
        url : '/WeChart/items.do',
        type : 'post',
        data : param,
        dataType : 'json',
        success : function (m) {
            console.log(m)
        }
    })
})

后端代码

@RequestMapping("/items")
public String charon(String name) {
    logger.info(name);
    return "test";
}

后台结果：name=张三

普通传参(前端参数与后端形参名称不一致)

前端代码：

var param = {
    "dcc" : "李四"
}

$('#btn').click(function () {
    $.ajax({
        url : '/WeChart/items2.do',
        type : 'post',
        data : param,
        dataType : 'json',
        success : function (m) {
            console.log(m)
        }
    })
})

后端代码

@PostMapping("/items2")
public String charon2(@RequestParam("dcc") String name) {
    logger.info(name);
    return "test";
}

当前端参数名称和后端不一致时可以使用RequestParam注解，请求参数的参数名,可以作为参数映射名称
后台结果：name=李四

pojo实体类传参

前端代码

var param = {
    "users" : "账户",
    "password" : "密码"
}

$('#btn').click(function () {
    $.ajax({
        url : '/WeChart/items3.do',
        type : 'post',
        data : param,
        dataType : 'json',
        success : function (m) {
            console.log(m)
        }
    })
})

后端代码

@PostMapping("/items3")
public String charon3(Pusers pusers) {
    logger.info(pusers.getUsers());
    logger.info(pusers.getPassword());
    return "test";
}

实体类代码

public class Pusers {
    private int id;
    private String users;
    private String password;
    //省略get/set方法
}

前端参数名称对应实体类中的属性名称，后端形参可以直接用实体类来表示
后台结果：users=账户，password=密码

多参无实体类传参一

前端代码

var param = {
    "users" : "账户",
    "password" : "密码",
    "name" : "我的名字",
};
param = JSON.stringify(param);//将对象转为json串
$('#btn').click(function () {
    $.ajax({
        url : '/WeChart/items4.do',
        contentType : "application/json;charset=UTF-8",
        data : param,
        type : 'post',
        dataType : 'json',
        success : function (m) {
           console.log(m)
        }
    })
})

后端代码

@PostMapping("/items4")
public String charon4(@RequestBody String map) {
    logger.info(map);
    return "test";
}

后端结果：{“users”:”账户”,”password”:”密码”,”name”:”我的名字”}

多参无实体类传参二

前端代码

var param = {
    "users" : "账户",
    "password" : "密码",
    "name" : "我的名字"
};

$('#btn').click(function () {
    $.ajax({
        url : '/WeChart/items5.do',
        data : param,
        type : 'post',
        dataType : 'json',
        success : function (m) {
           console.log(m)
        }
    })
})

后端代码

@PostMapping("/items5")
public String charon5(@RequestParam Map<String, Object> map) {
    logger.info(map.toString());
    logger.info((String) map.get("name"));
    logger.info((String) map.get("users"));
    return null;
}

后端结果：{users=账户, password=密码, name=我的名字}，我的名字，账户

传递数组

前端代码

var param = {
   "ids" : [1,2,3]
};

$('#btn').click(function () {
    $.ajax({
        url : '/WeChart/items6.do',
        data : param,
        type : 'post',
        dataType : 'json',
        success : function (m) {
           console.log(m)
        }
    })
})

后端代码

@PostMapping("/items6")
public String charon6(@RequestParam(value = "ids[]") Integer[] ids) {
    logger.info("数据：{}", Arrays.asList(ids));
    return "test";
}

后端结果：[1, 2, 3]

传递集合

前端代码

var param = {
      "ids" : [1,2,3]
   };

   $('#btn').click(function () {
       $.ajax({
           url : '/WeChart/items7.do',
           data : param,
           type : 'post',
           dataType : 'json',
           success : function (m) {
              console.log(m)
           }
       })
   })

后端代码

@PostMapping("/items7")
public String charon7(@RequestParam(value = "ids[]") List<Integer> ids) {
    logger.info("数据：{}", ids.toString());
    return "test";
}

后端结果：[1, 2, 3]

传递复杂性参数

前端代码

var dcc = [];
   var lists = [{
       "users" : "张三1",
       "password" : "密码1"
   },{
       "users" : "张三2",
       "password" : "密码2"
   }];
   var user ={
       "username" : "张三"
   };
   user.lists = lists;//向对象种添加新属性
   dcc.push(user);
   $('#btn').click(function () {
       $.ajax({
           url : '/WeChart/items9.do',
           data : JSON.stringify(dcc),
          contentType : "application/json",
           type : 'post',
           success : function (m) {
              console.log(m)
           }
       })
   })

后端代码

@PostMapping("/items9")
public String charon9(@RequestBody String maps) {
    logger.info("数据：{}", maps);
    return "test";
}

后端结果：[{“username”:”张三”,”lists”:[{“users”:”张三1”,”password”:”密码1”},{“users”:”张三2”,”password”:”密码2”}]}]

总结

1. @RequestBody注解，必须与contentType 类型application/json配合使用
2. @RequestParam注解，必须与contentTyp类型application/x-www-form-urlencoded配合使用，其为默认类型。
3. JSON.stringify()把对象类型转换为字符串类型，配合@RequestBody注解和contentType 类型application/json使用。

以上就是Springboot传递参数的几种举例，每个方法都是经过博主实际测试通过的，在此分享同时也算是做个记录。