ajax数组传参

作为一名前端coder,用的最多的请求就是ajax请求了。或许你用的其他框架,但是从原生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(){
  }
})

当请求的时候参数如下:


ajax数组传参_第1张图片
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就可以按照序列化方式传参。问题也就解决了,所以说看书还是要仔细

你可能感兴趣的:(ajax数组传参)