【前台 ajax】web项目前台传递数组给后台 两种方式

简介: 项目使用maven    springMVC   有需求 将前台的数组   在ajax中 送给后台方式1:前台代码:【注意:ajax中的属性---traditional:true,  】    如果Post是string数组或者int数组,则ajax中traditional: true, ...

项目使用maven    springMVC   

有需求 将前台的数组   在ajax中 送给后台

方式1:

前台代码:【注意:ajax中的属性---traditional:true,  】

    如果Post是string数组或者int数组,则ajax中traditional: true,

    如果Post是对象数组,则ajax中traditional: false,否则对象将为空

 1 //首先 是数组数据的封装
 2 $.each(checkedNodes,function(i,node){
 3                     nodeArr.push(node.id);
 4                 });
 5 //ajax中  需要设置 traditional:true,
 6                 if(roleName !="" ){
 7                     $.ajax({url:"roleAdd.htmls",
 8                             dataType:'json',
 9                             type:"post",
10                             traditional:true,
11                             data:{
12                                 "roleName" : roleName,
13                                 "roleCre" : roleCre,
14                                 "nodeArr" : nodeArr,
15                             },
16                             success:function(data){
17                                 if(data != null){
18                                     parent.page.pageSet(); 
19                                 }    
20                                 parent.layer.close(parent.indexRoleAdd); //获取到layer的弹出窗 关闭它  indexRoleAdd
21                     }});
22                 }
View Code

后台代码:【使用String[] nodeArr数组接收即可】

 1 @RequestMapping("/roleAdd")
 2     @ResponseBody
 3     public Role roleAdd(String roleName,String roleCre,HttpServletRequest request, String[] nodeArr){
 4         
 5         Role role = new Role();
 6         role.setRoleId(UUID.randomUUID().toString());
 7         role.setRoleName(roleName);
 8         role.setRoleCre(roleCre);
 9         //创建信息
10         HttpSession session = request.getSession();
11         User user = (User) session.getAttribute("user");
12         role.setTransPerson(user.getUserId());
13         role.setCreateDate(new Timestamp(System.currentTimeMillis()));
14 //        roleService.save(role);
15 //        roleService.flush();
16         return role;
17     }
View Code

 

 

 

 

 

方式2:

前台代码:

 1 $.each(checkedNodes,function(i,node){
 2                     nodeArr.push(node.id);
 3                 });
 4 //数组数据 封装完成后转化为JSON字符串
 5                 var nodes = JSON.stringify(nodeArr);
 6                 
 7                 if(roleName !="" ){
 8                     $.ajax({url:"roleAdd.htmls",
 9                             dataType:'json',
10                             type:"post",
11                             data:{
12                                 "roleName" : roleName,
13                                 "roleCre" : roleCre,
14                                 "nodeArr" : nodes,
15                             },
16                             success:function(data){
17                                 if(data != null){
18                                     parent.page.pageSet(); 
19                                 }    
20                                 parent.layer.close(parent.indexRoleAdd); //获取到layer的弹出窗 关闭它  indexRoleAdd
21                     }});
22                 }
View Code

后台代码:【String nodeArr接收数据即可】

 1     /**
 2      * 进行添加角色的操作
 3      * @return
 4      */
 5     @RequestMapping("/roleAdd")
 6     @ResponseBody
 7     public Role roleAdd(String roleName,String roleCre,HttpServletRequest request, String nodeArr){
 8         
 9         Role role = new Role();
10         role.setRoleId(UUID.randomUUID().toString());
11         role.setRoleName(roleName);
12         role.setRoleCre(roleCre);
13         //创建信息
14         HttpSession session = request.getSession();
15         User user = (User) session.getAttribute("user");
16         role.setTransPerson(user.getUserId());
17         role.setCreateDate(new Timestamp(System.currentTimeMillis()));
18 //        roleService.save(role);
19 //        roleService.flush();
20         return role;
21     }
View Code

只不过 这样接收到的数组是字符串形式的  需要自己在后台进行二次处理 才能拿到 数组内的数据

 

 

 

 

 

这两种方式都可以 实现!!!!!

相关文章
|
5月前
|
JSON 前端开发 Java
Springboot接收ajax提交JSON数组
Springboot接收ajax提交JSON数组
|
5月前
|
XML 存储 JSON
web前后台数据交互的四种方式
web前后台数据交互的四种方式
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
27 0
|
3月前
|
XML JSON 前端开发
教你怎么用ajax传数组(也可以是转为json)
教你怎么用ajax传数组(也可以是转为json)
35 0
|
3月前
|
设计模式 开发框架 前端开发
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
|
4月前
|
算法 Java Python
Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
47 0
|
4月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
4月前
|
前端开发 JavaScript
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
60 0
|
5月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
|
8月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
98 0