Spring Boot AJAX 提交对象数组JSON

最新推荐文章于 2023-12-14 21:42:02 发布

SioChan

最新推荐文章于 2023-12-14 21:42:02 发布

阅读量268

点赞数

文章标签： json ajax spring boot

本文链接：https://blog.csdn.net/weixin_42316424/article/details/108577294

版权

Spring Boot AJAX 提交对象数组JSON

1.导入依赖

本文使用的JSON转换是阿里的fastJson

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.39</version>
</dependency>

2.实体类

public class User {
    private Long id;
    private String userName;
    // 省略get/set/toString方法，请自行添加
}

3.控制器

@Controller
public class JsonController {

    @GetMapping("/user")
    public String toUser() {
        return "user";
    }

    @PostMapping("/addUser1")
    @ResponseBody
    public String addUser1(@RequestBody JSONObject jsonObject) {
        JSONArray jsonArray = jsonObject.getJSONArray("data");
        String dataStr = JSONObject.toJSONString(jsonArray);
        List<User> users = JSONObject.parseArray(dataStr, User.class);
        return "方式1 成功";
    }

    @PostMapping("/addUser2")
    @ResponseBody
    public String addUser2(@RequestBody User[] users) {
        for (User user : users) {
            System.out.println(user);
        }
        return "方式2 成功";
    }

    @PostMapping("/addUser3")
    @ResponseBody
    public String addUser3(@RequestBody List<User> users) {
        for (User user : users) {
            System.out.println(user);
        }
        return "方式3 成功";
    }
}

其中方式2和方式3的不同在于一个是数组接受，一个是List<对象>接受

4.前端页面代码

user.html

<body>
<form>
    <input type="button" id="methodOne" value="方式1">
    <input type="button" id="methodTwo" value="方式2">
    <input type="button" id="methodThree" value="方式3">
</form>
<script type="text/javascript">
    var users = [{id: 1, userName: "Sio"}, {id: 2, userName: "Jack"}]
    $("#methodOne").on("click", function () {
        $.ajax({
            url: "/addUser1",
            data: JSON.stringify({data: users}),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            async: false,
            success: function (result) {
                alert(result);
            }
        });
    });
    $("#methodTwo").on("click", function () {
        $.ajax({
            url: "/addUser2",
            data: JSON.stringify(users),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            async: false,
            success: function (result) {
                alert(result);
            }
        });
    });
    $("#methodThree").on("click", function () {
        $.ajax({
            url: "/addUser3",
            data: JSON.stringify(users),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            async: false,
            success: function (result) {
                alert(result);
            }
        });
    });
</script>
</body>

其中方式2和方式3提交内容相同，都是直接提交数组，即[ {对象} , {对象} ]

方式1则是提交JSON格式的数据，即{ key : [数组] }

SioChan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot AJAX 提交对象数组JSON

Spring Boot AJAX 提交对象数组JSON1.导入依赖本文使用的JSON转换是阿里的fastJson<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version></dependency>2.实体类public class
复制链接

扫一扫