ajax提交复杂对象数据
2023-09-27 14:28:34 时间
public class RouteItemManageReq { private List<WorkNodeReq> targetNodes; private RouteItemReq obj; public List<WorkNodeReq> getTargetNodes() { return targetNodes; } public void setTargetNodes(List<WorkNodeReq> targetNodes) { this.targetNodes = targetNodes; } public RouteItemReq getObj() { return obj; } public void setObj(RouteItemReq obj) { this.obj = obj; } }
public @ResponseBody List<SpiderBaseRespCenterExt> pushAddRouteItem(RouteItemManageReq req,Model model) { return nodeManageService.pushAddRouteItem(req); }
要在ajax中提交类似这样的结构,不能直接将js直接附加到ajax请求的data上,否则不管是数组还是属性都会以obj[prop][subprop]的方式传递到服务端,导致spring mvc无法解析而报错。
所以,如果在ajax中需要通过拼接成string的方式传递。类似如下:
for(var x=0;x<targetNodes.length;x++) { formData = formData + "targetNodes[" + x + "].clusterName=" + targetNodes[x].split(":")[0] + "&"; formData = formData + "targetNodes[" + x + "].ip=" + targetNodes[x].split(":")[1] + "&"; formData = formData + "targetNodes[" + x + "].port=" + targetNodes[x].split(":")[2] + "&"; } formData = formData + "obj.routeItem.serviceId=" + $("#myModal-route input[name='serviceId']").val() + "&"; formData = formData + "obj.routeItem.systemId=" + $("#myModal-route input[name='systemId']").val() + "&"; formData = formData + "obj.routeItem.subSystemId=" + $("#myModal-route input[name='subSystemId']").val() + "&"; formData = formData + "obj.routeItem.appVersion=" + $("#myModal-route input[name='appVersion']").val() + "&"; formData = formData + "obj.routeItem.companyId=" + $("#myModal-route input[name='companyId']").val() + "&"; formData = formData + "obj.routeItem.clusterName=" + $("#myModal-route input[name='clusterName']").val(); $.ajax({ url: "/middle/00000110.json", //请求的url地址 dataType: "json", //返回格式为json // async: false, //请求是否异步,默认为异步,这也是ajax重要特性 data: formData, //参数值 type: "GET", //请求方式
拼接其实是个很不好的实现,维护成本高,极容易出错,所以建议大家使用js模板库比如jsrender,可参考http://www.cnblogs.com/zhjh256/p/5978907.html。
相关文章
- 封装一个简易版的ajax操作对象
- datatables 服务器返回数据后的处理-表格数据属性的操作方法(ajax.dataSrc)
- Ajax POST单个对象或多个对象至API
- jQuery的Ajax请求数据时type无法使用GET
- Vue 代理服务器___Vue 跨域通过Axios 的ajax方式的get请求获取数据
- 120.AJAX_基本使用
- Ajax 调用的WCF
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
- 利用jquery对ajax操作,详解原理(附代码)
- php判断是否为ajax请求
- ajax与算法,sql的group处理
- jquery ajax获取json并解析,获取的json是object对象格式
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
- Ajax中post方法400和404的问题
- 后台判断ajax请求的请求后字段 。
- Ajax系列之二:核心对象XMLHttpRquest
- onsubmit 校验表单时利用 ajax 的 return false 无效问题
- Ajax叠加(Ajax返回数据用Ajax发出)
- VUE 更好的 ajax 上传处理 axios.js
- 如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。