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

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

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

//创建一个测试数组
var boxIds = new Array();
boxIds.push(12182);
boxIds.push(12183);
boxIds.push(12184);
//向后台交互
$.ajax({
  url: "/xxx",
  type: "GET",
  data: {
    "boxIds": boxIds,
    "boxType": 0,
    "time": new Date().getTime()
  },
  success: function(data) {
    //do sth...
  }
});

后台controller代码（SpringMVC）

@ResponseBody
@RequestMapping(value = "/box/changeLock")
public String changeLock(final Long[] boxIds, final int boxType) {
  return locker_ChangeLockService.changeLock(boxIds, boxType);
}

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

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

解决办法：

设置jQuery.ajax的tradional属性

$.ajax({
  url: "/xxx",
  type: "GET",
  data: {
    "boxIds": boxIds,
    "boxType": 0,
    "time": new Date().getTime()
  },
  traditional: true,//这里设置为true
  success: function(data) {
    //do sth...
  }
});

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

请求参数2

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

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

赞 (0)

相关推荐

  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解

    下面通过实例给大家说明比较直观些,更方便大家了解. 本人的项目中通过jquery.ajax调用webservice. 客户端代码如下: $.ajax({ url: "test/xxx.asmx", type: 'POST', dataType: 'xml', timeout: , data: { name: "zhangsan", tags: ["aa", "bb", "cc"] }, error: fun

  • 利用ajax传递数组及后台接收的方法详解

    利用ajax传递数组及后台接收的方法详解

    前言 我们在使用ajax异步的提交多选框得到需要操作的对象的id,这时我们可以把每一个id做出一个对象,之后放到一个数组中,再使用JSON.stringify()对这个数组进行json的格式化:在后台中再inputStream中解析出我们的json字符串,之后只用: new JSONArray()得到json数组,循环解析我们想要的属性: var countsCheckBox = $("input[type='checkbox']:checked"); var booksid = []

  • jquery ajax 向后台传递数组参数示例

    需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO

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

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

    今天重温了一个问题,jQuery.ajax向后台传递一个数组,而在后台接收不到该值. 前台js方法部分代码如下: //创建一个测试数组 var boxIds = new Array(); boxIds.push(12182); boxIds.push(12183); boxIds.push(12184); //向后台交互 $.ajax({ url: "/xxx", type: "GET", data: { "boxIds": boxIds, &q

  • axios向后台传递数组作为参数的方法

    axios 的post方法向后台传递参数时的代码: var params = new URLSearchParams(); params.append('faultNum',this..fault_num); params.append('far',this.far); this.$Axios.post("/test",params) .then(res => { }).catch(err => { console.log(err); }); 其中far是个数组,但此时后台

  • 解决jquery .ajax 在IE下卡死问题的解决方法

    解决IE编码问题第一步: dataType:($.browser.msie) ? "text" : "xml" 先这样做让IE 识别返回的是text 还是xml 第二步: 复制代码 代码如下: function parseXml(xml) { //XML IE编码问题第二步 if (jQuery.browser.msie) { // 判断浏览器是不是IE var xmlDoc = new ActiveXObject("Microsoft.XMLDOM&qu

  • jQuery Ajax请求后台数据并在前台接收

    1.前台使用jQuery ajax请求 $.ajax({ url: "r_getRolePer.action", dataType:'json', data: {userId:"1"}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data.add,''); //这里使用的时easyui的格式 }, }); 2.在action里面使用response.

  • jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法

    python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法

    这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,使用POST与GET请求时都正常,而Request Method使用PUT或DELETE请求时,直接爆"HTTP Error 405: Method Not Allowed"错误.而ajax提交的Request Method值DELETE也变成了OPTIONS了. 度娘了好多答案,要么说是浏览器不支持,要么说自己重新封装jquery,还有其他的一些

  • 使用ajax接收后台发送过来的json数据方法

    今天给大家带来一个简单的使用ajax接收后台返回json格式的demo 废话不多说直接上代码 后台代码 package com.sidan.outjson; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpSe

随机推荐