ajax数组传参

作者: 柯琦 | 来源:发表于2017-05-16 11:22 被阅读66次

作为一名前端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(){
  }
})

当请求的时候参数如下:


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数组传参

    作为一名前端coder,用的最多的请求就是ajax请求了。或许你用的其他框架,但是从原生js到jquery,aja...

  • Spring boot 接收数组

    前端ajax传参发请求: 发出的数组叫nds 接收: 接收的时候,@RequestParam不能用nds接收,要用...

  • Linux内核模块传参

    数据类型变量的传参 数组类型传参 实例

  • Java 4

    可变参数 JDK中具有可变参数的类Arrays.asList()方法。 分别传多个参、传数组,传数组又传参的情况。...

  • 函数与数组

    函数的传参 可变参(不定参)arguments 参数的个数可变,参数数组 1.增加(改变数组内容) push() ...

  • Vue与Element走过的坑。。。。带上Axios

    1.Axios中post传参数组(java后端接收数组) 虽然源数据本身就是数组,但是传参时会自动变成key:数值...

  • 十三 call / apply

    作用:改变this指向 区别:传参列表不同 // apply必须传数组 function Person ( n...

  • 今日小结

    指针传参 在函数间指针变量做参传值,只传地址,不附带其他信息。故以数组名为指针变量被函数调用传参后,在调用函数内s...

  • jQuery ajax传数组

    首先,定义个空数组,push之后进行传参。发现参数是这样的:

  • 嵌入式day09

    数组在函数间传参 全局数组传递方式 复制传递方式 实参为数组的指针,形参为数组名(本质是一个指针变量) 地址传递方...

网友评论

    本文标题:ajax数组传参

    本文链接:https://www.haomeiwen.com/subject/wjokxxtx.html