JS与SpringMVC前后端交互:数组数据提交至后台的实现方法

作者:青柠时间:2026-10-23 11:23:56浏览:646

本文详解如何在JavaScript中利用Ajax将数组数据提交至SpringMVC后端。前端需设置traditional为true并指定数组参数名,后端通过@RequestParam注解接收Long[]类型数组,实现前后端数据的高效交互。

前端Ajax提交数组数据配置

在前端JavaScript中,首先需要构建Ajax请求以提交数组数据。代码示例展示了如何定义一个包含ID的数组,并通过POST方法向指定URL发送请求。关键配置包括设置traditional为true以正确处理数组序列化,以及指定数据载荷中的数组参数名。


var ids =new Array();
$.ajax({
  type: "POST",
  url: "/user/downReport",
  dataType: "html",
  traditional: true,
  data:{
    downReportArray:ids
  },
  async: true,
  success: function (data) {
    if(data.code==200){
      console.log("正在打包...")
    }
  }
});

后端SpringMVC接收数组参数

后端SpringMVC控制器通过@RequestMapping注解映射对应的URL路径,并指定请求方法为POST。使用@ResponseBody确保返回JSON格式数据。核心在于使用@RequestParam注解,明确指定前端传来的参数名,并将其绑定为Long类型的数组,从而接收前端提交的多个ID值。


  @RequestMapping(value = "/downReport", method = {RequestMethod.POST})
  @ResponseBody
  public Object downReport(@RequestParam(value = "downReportArray") Long[] downReportArray,HttpServletRequest request ) throws Exception {
     ...
  }

通过上述前端Ajax配置与后端SpringMVC参数绑定的配合,实现了数组数据从前端到后台的完整传输流程。该方案解决了传统表单提交数组时的序列化问题,为类似场景提供了可参考的实现范式。

作者最新文章