ajax如何向后端传递List集合

最新推荐文章于 2026-05-17 07:16:02 发布

转载最新推荐文章于 2026-05-17 07:16:02 发布 · 3.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：www.baidu.com

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种批量删除博客功能的实现方法，包括前端如何通过AJAX发送POST请求来传递博客ID列表，并确保正确转换为JSON格式；同时详细描述了后端如何接收并处理这些数据。

问题描述
最近在写个人博客项目，博客后台管理涉及到批量删除博客的功能，后端接收的是List数据类型。
那么如果通过ajax,直接向后端传递List数据类型的数据，而不用转换呢？

解决方法
前端
ajax发送put 和 delete 请求时,需要传递参数，如果参数在url地址栏上，则可以正常使用。
但是该业务需求是需要用data传递，所以需要将请求方式设置为 type：“post”,

//执行删除博客的方法，
deleteBlogs() {
    //博客的id数组
    let blogIds = [];
    this.multipleSelection.forEach(blog => {
            blogIds.push(blog.id);
        }
    );
    $.ajax({
        method:"post",
        url:"/blog/ids",
        dataType: "json",
        data: JSON.stringify(blogIds),
        headers:{
            'Content-Type':'application/json;charset=UTF-8',
        },
        success: function(req) {
            //请求成功时处理，一般只用到这一个
        },
        error: function() {
            //请求出错处理
        }
    });
}

后端

@ApiOperation(value = "批量删除博客", notes = "根据博客id集合，批量删除博客（并维护中间表）;")
@PostMapping("/ids")
public ResponseEntity<Void> deleteBlogs (
        @ApiParam(name = "blogIds", value = "博客id集合", required = true)
        @RequestBody List<Long> blogIds ) {
    blogService.deleteBlogs(blogIds);
    return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
}

划重点
ajax传list集合得用JSON.stringify()转为json串，同时ajax请求的时候也要指定dataType: “json”,contentType:“application/json” 。然后后端需加@RequestBody注解
————————————————
版权声明：本文为CSDN博主「小盒的_1028」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44491927/article/details/106197534