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

项目使用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

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

 

 

 

 

 

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

时间: 2024-10-25 14:31:36

【前台 ajax】web项目前台传递数组给后台 两种方式的相关文章

javascript数组输出的两种方式_javascript技巧

本文实例讲述了javascript数组输出的两种方式.分享给大家供大家参考.具体如下: 遍历javascript数组,两种方式: 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var str = "how are you today"; var arr = str.split(" "); for(var key in ar

jqueryajax-Jquery Ajax 如何向Sevlet传递数组,在Sevlet里如何接收这个数组

问题描述 Jquery Ajax 如何向Sevlet传递数组,在Sevlet里如何接收这个数组 Jquery Ajax 如何向Sevlet传递数组,在Sevlet里如何接收这个数组! 求源码实例 感激不尽!!! 解决方案 用JSONArray类去接收

在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式,虽然Web API或者WCF方式的调用,相对直接连接数据库方式,响应效率上略差一些,不过扩展性强,也可以调动更多的设备接入,包括移动应用接入,网站接入,Winfrom客户端接入,这样可以使得服务逻辑相对独立,负责提供接口即可.这种方式中最有代表性的就是当前Web API的广泛应用,促进了各个接入端

通过Ajax两种方式讲解Struts2接收数组表单的方法_AJAX相关

使用struts2表单传值,可以传一个或者是作为一个对象的各个属性传,都非常灵活便捷.但是如果我们需要传一个数组并希望struts正确接收,该怎么处理呢? 下面我将通过普通表单和ajax两种方式讲解.首先我们有如下一个实体,一个action和一个jsp. Student.java public class Student { private String name; private String num; } StudentAction.java public class StudentActi

通过Ajax两种方式讲解Struts2接收数组表单的方法

使用struts2表单传值,可以传一个或者是作为一个对象的各个属性传,都非常灵活便捷.但是如果我们需要传一个数组并希望struts正确接收,该怎么处理呢? 下面我将通过普通表单和ajax两种方式讲解.首先我们有如下一个实体,一个action和一个jsp. Student.java public class Student { private String name; private String num; } StudentAction.java public class StudentActi

jquery ajax提交表单数据的两种方式_jquery

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

Web APi之认证(Authentication)两种实现方式【二】(十三)

前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底就是安全问题,在Web API中有多种方式来实现安全,[accepted]方式来处理基于IIS的安全(通过上节提到的WindowsIdentity依赖于HttpContext和IIS认证)或者在Web API里通过使用Web API中的消息处理机制,但是如果我们想应用程序运行在IIS之外此时Wind

二维数组的认识及其表示元素的两种方式

/* ============================================================================ Name : TeatArr.c Author : lf Version : Copyright : Your copyright notice Description : 二维数组的认识以及其表示元素的两种方式 备注说明 1 要理解二维数组的存储方式. 2 实际上利用a[i][j]的方式并不"正统",但这靠近我们的 常识一些,

原生ajax和iframe框架实现图片文件上传的两种方式_AJAX相关

大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 方法一:利用iframe框架上传图片 html代码如下: <div class="frm"> <form name="uploadFrom" id="uploadFrom" action="upload.