ajax请求参数为数组解决方案

1 Ajax 请求参数为数组解决方案

1.4 的版本中, 会默认对请求参数进行深度序列化,所以传递的参数为数组时,后端无法直接对请求参数进行绑定

传递数组的格式:

1.1 解决方案一

设置 ajax traditional 属性
traditional:是否使用传统的方式浅层序列化

前端传递参数:

$.ajax({
        // 使用传统的方式进行序列化
        traditional: true,
        url: "stu/deleteStu.action",
        data: {
            // ids 请求参数类型为数组
            ids: ids
        },
        success: function (data) {
           ...
        },
        dataType: "json"
    });

传递参数:

后端绑定参数:

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteStu(@RequestParam("ids") ArrayList<String> ids){
     boolean removeStatus = stuService.removeByIds(ids);
     return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

1.2 解决方案二

使用 request 对象 getParameterValues() 方法

前端传递参数:

$.ajax({
        url: "stu/deleteStu.action",
        data: {
            ids: ids
        },
        success: function (data) {
           ...
        },
        dataType: "json"
    });

传递参数:

后端绑定参数:

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteStu(HttpServletRequest request){
     String[] arr = request.getParameterValues("ids[]");
     boolean removeStatus = stuService.removeByIds(Arrays.asList(arr));
     return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

1.3 解决方案三

请求参数格式化为 json 字符串的格式
需要设置 contentType: "application/json"
请求方法类型 post
使用@RequestBody 注解

前端传递参数:

$.ajax({
        url: "stu/deleteStu.action",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(ids),
        success: function (data) {
           ...
        },
        dataType: "json"
    });

请求参数:

后端绑定参数:

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteStu(@RequestBody String[] ids){
      boolean removeStatus = stuService.removeByIds(Arrays.asList(ids));
      return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}

1.4 解决方案四

前端拼接字符串

前端传递参数:

idStr += this.id + ",";

$.ajax({
        url: "stu/deleteStu.action",
        data: {
            idStr: idStr
        },
        success: function (data) {
            ...
        },
        dataType: "json"
    });

请求参数:

后端绑定参数:

@ResponseBody
@RequestMapping("/deleteStu.action")
public Result deleteHost(String idStr){
     String[] ids = idStr.split(",");
     boolean removeStatus = stuService.removeByIds(Arrays.asList(ids));
     return new Result(removeStatus ? "删除成功" : "删除失败", removeStatus);
}