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"}]}]

总结

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

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