jQuery.ajax向后台传递数组问题的解决方法

我就是我 2023-07-04 15:44 27阅读 0赞

今天重温了一个问题，jQuery.ajax向后台传递一个数组，而在后台接收不到该值。

前台js方法部分代码如下：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>//创建一个测试数组</code> <code>var</code> <code>boxIds = </code><code>new</code> <code>Array();</code> <code>boxIds.push(12182);</code> <code>boxIds.push(12183);</code> <code>boxIds.push(12184);</code> <code>//向后台交互</code> <code>$.ajax({ </code> <code>&nbsp;&nbsp;</code><code>url: </code><code>"/xxx"</code><code>,</code> <code>&nbsp;&nbsp;</code><code>type: </code><code>"GET"</code><code>,</code> <code>&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"boxIds"</code><code>: boxIds,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"boxType"</code><code>: 0,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"time"</code><code>: </code><code>new</code> <code>Date().getTime()</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>success: </code><code>function</code><code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//do sth...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

后台controller代码（SpringMVC）

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>@ResponseBody</code> <code>@RequestMapping</code><code>(value = </code><code>"/box/changeLock"</code><code>)</code> <code>public</code> <code>String changeLock(</code><code>final</code> <code>Long[] boxIds, </code><code>final</code> <code>int</code> <code>boxType) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>locker_ChangeLockService.changeLock(boxIds, boxType);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

观察浏览器中发送的请求，可以发现参数如下：

boxIds\[\]:223,

boxIds\[\]:224,

可以看到，参数的名字为boxIds\[\]而不是我们所定义的boxIds，也就是说，当传递数组时，会在我们的数组名称后自动加上”\[\]”，所以后台接不到。

**解决办法： **

设置jQuery.ajax的tradional属性

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>$.ajax({ </code> <code>&nbsp;&nbsp;</code><code>url: </code><code>"/xxx"</code><code>,</code> <code>&nbsp;&nbsp;</code><code>type: </code><code>"GET"</code><code>,</code> <code>&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"boxIds"</code><code>: boxIds,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"boxType"</code><code>: 0,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"time"</code><code>: </code><code>new</code> <code>Date().getTime()</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>traditional: </code><code>true</code><code>,</code><code>//这里设置为true</code> <code>&nbsp;&nbsp;</code><code>success: </code><code>function</code><code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//do sth...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

修改之后重新发出请求，观察浏览器：

请求参数2

这次参数不带”\[\]”了，并且后台可以成功接收到该数组。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[Link 1]: https://www.jb51.net/article/113586.htm#