ajax数组传参

Posted 2021-04-15 闲言碎语而已

数据请求中，用的最多的请求就是ajax请求了（已经逐渐用fetch取代了）。或许你用的其他框架，但是从原生js到jquery，ajax你一定不陌生。当初摸打滚爬的学习的时候就碰到关于ajax的一个问题，那就是ajax数组传参。
举个实例如下代码：

 $.ajax({  url: 'http://localhost:8088/test.jsp',  type: 'GET',  dataType: 'json',  data:{    user:'username',    arr: ['talent','hirer','agent']
  },  success: function(data){
  },  error: function(){
  }
})

当请求的时候参数如下：

image.png

看到这你就明白问题所在，arr数组不是你想要的，你想要的是这种:

user:username,arr:'talent',arr:'hirer',arr:'agent'

项目催的很，情急之下你用这样的方式解决

url: 'http://localhost:8088/test.jsp?user=username&arr=talent&arr=hirer&arr=agent'

运行结果如下：

image.png

是的这样的确解决，达到了你的目的。但是毕竟这是妥协的做法，那么你就想难道ajax就不能按照你想要的方式传送吗？答案当然是有的，只怪当初学习jquery不认真了解不深入,先放解决办法
代码修改如下：

 $.ajax({  url: 'http://localhost:8088/test.jsp',  type: 'GET',  dataType: 'json',
  traditional ：true
  data:{    user:'username',    arr: ['talent','hirer','agent']
  },  success: function(data){
  },  error: function(){
  }
})

再看结果：

image.png

可以知道我们加了个：traditional ：true,那么这个traditional有何作用呢
打开个jquery文档如下解释：

traditional (Boolean)
如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param 方法。

在翻文档查看jQuery.param 方法

将表单元素数组或者对象序列化。是.serialize()的核心方法。
在jQuery 1.3中，如果传递的参数是一个函数，那么用.param()会得到这个函数的返回值，而不是把这个函数作为一>个字符串来返回。
在jQuery 1.4中，.param()会深度递归一个对象来满足现在脚本语言和框架，比如php， Ruby on Rails等。你可以
通过jQuery.ajaxSettings.traditional = true; 来全局得禁用这个功能。
注意：因为有些框架在解析序列化数字的时候能力有限，所以当传递一些含有嵌套对象、数组的对象作为参数时，
请务必小心！
在jQuery 1.4中，html5的input元素也会被序列化。

第一句已经很明显告知我们表单元素数组或者对象序列化
所以只要将traditional设置为true就可以按照序列化方式传参。问题也就解决了，所以说看书还是要仔细