记一下四种简单类型数组传参的方式

一、使用JQuery流派进行请求封装

后端接口形式

    @PostMapping("/v1")
    public List<String> arr01(@RequestParam("ids[]") String[] ids) {
        System.out.println("v1------>" + Arrays.toString(ids));
        return Arrays.asList(ids);
    }

前端请求

// JQuery 比较简单除暴
  var ids = ['123', '345', '4566', '889'];

  $.post('http://localhost:8080/array/v1', {ids: ids}, function (rs) {
    console.log("jquery---------", rs)
  })
// axios结合Qs模块使用，arrayFormat: 'brackets'
  axios.post('http://localhost:8080/array/v1', Qs.stringify({ids: ids}, {arrayFormat: 'brackets'})).then(function (value) {
    console.log("axios qs brackets----------", value)
  }).catch(function (reason) {
    console.log("error qs brackets--------", reason)
  })

请求头参数格式
这里的后端期望的参数为 ids[]=1 ids[]=2，可以通过network看到参数格式如下、

二、使用json传参

这是个比较好的方式，避免各种问题。不仅可以传简单类型的数组，也可以复杂类型。

后端接口

   @PostMapping("/v2")
    public List<String> arr02(@RequestBody String[] ids) {
        System.out.println("v2------>" + Arrays.toString(ids));
        return Arrays.asList(ids);
    }

前端请求

  // 直接使用axios
  axios.post('http://localhost:8080/array/v2', ids).then(function (value) {
    console.log("axios----------", value)
  }).catch(function (reason) {
    console.log("error--------", reason)
  })
  // JQuery
  $.ajax({
    type: 'post',
    url: 'http://localhost:8080/array/v2',
    contentType: 'application/json',
    data: JSON.stringify(ids),
    success: function (rs) {
      console.log('jquery json------', rs)
    }
  })

请求参数格式
这种方式主要就是要把请求头的 Content-Type 设置为 application/json，请求体为字符串。

三、axios在Qs模块使用repeat方式格式化数组下(不推荐，花里胡哨的谁知道)

后端接口

    @PostMapping("/v3")
    public List<String> arr03(String[] ids) {
        System.out.println("v3------>" + Arrays.toString(ids));
        return Arrays.asList(ids);
    }

前端请求

  // axios
  axios.post('http://localhost:8080/array/v3', Qs.stringify({ids: ids}, {arrayFormat: 'repeat'})).then(function (value) {
    console.log("axios qs repeat----------", value)
  }).catch(function (reason) {
    console.log("error qs repeat--------", reason)
  })
  // 原生xhr
  var xhr = new XMLHttpRequest()
  xhr.open('post', 'http://localhost:8080/array/v3', true)
  xhr.onload = function (ev) {
    console.log("xhr v3---------", JSON.parse(xhr.responseText))
  }
  var fd = new FormData()
  fd.append('ids', '123')
  fd.append('ids', '332')
  xhr.send(fd)

请求参数格式
其实这个和方式一没事区别，只是对参数名的处理方式不一样，参数格式如下图，对比下明白。

四、直接按照字符串传递

这个就比较粗暴了，既然是简单类型，不如把数组用连接符连接起来成个字符串，传到后端在转换回来~

后端接口

    @PostMapping("/v4")
    public List<String> arr04(String ids) {
        String[] split = ids.split(";");
        System.out.println("v4------>" + Arrays.toString(split));
        return Arrays.asList(ids);
    }

前端请求

  $.post('http://localhost:8080/array/v4', {ids: ids.join(';')}, function (rs) {
    console.log("jquery join---------", rs)
  })

请求参数格式
这就是简单的传字符串了，没啥特别的。这种方式需要前后端配合，规定好分隔符才好，这样可以避免数组的传递。

对于简单类型数组的传递大概也就这些个方式了吧。还是使用json格式更好，毕竟不论什么类型的数据都能很好的传递。加分隔符对于一些简单的字段也挺合适的~

最后编辑于：2019.08.09 00:00:02