最近在做一个小小的功能模块,前台有很多的数据需要传入到后台,前台页面设计如下:

看起来不是很清楚,总之表单中的数据都要提交到后台进行处理,然后插入到数据库,而且是一起提交到后台的,实现的方法大致有两种:(在处理类似需求,如果大家有其他意见,可以一起来交流分享)

1)通过表单提交,当然在后台需要为每个字段定义一个集合对象,然后在页面中使用name标志,如果使用了strut2的话就更简单了,在Action中定义的集合对象名称和页面标签的name字段标签一致,那么这些数据在后台就都能够取得到了,这里就不进行阐述了;

2)封装JSON对象,然后通过Ajax方法提交到后台,将每行记录封装为一个JSON对象,然后把这些JSON对象加入到一个数组当中,核心代码如下:

  1. //封装JSON数组对象
  2. function getJSONObject(){
  3. var dateArray=getArrayByName("plan_date");
  4. var weekArray=getArrayByName("plan_week");
  5. var jcTypeArray=getArrayByName("jcType");
  6. var jcNumArray=getArrayByName("jcNum");
  7. var xcxcArray=getArrayByName("xcxc");
  8. var kilometreArray=getArrayByName("kilometre");
  9. var kcAreaArray=getArrayByName("kcArea");
  10. var commentsArray=getArrayByName("comments");
  11. var startTime=$("#startTime").val();
  12. var endTime=$("#endTime").val();
  13. var plan_title=$("#plan_title").val();
  14. var objArray=[];
  15. var obj=null;
  16. var JSONObj=new Object();
  17. JSONObj.start_time=startTime;
  18. JSONObj.end_time=endTime;
  19. if(plan_title==""){
  20. plan_title=startTime+"至"+endTime+"检修计划";
  21. }
  22. JSONObj.plan_title=plan_title;
  23. for(var i=0;i<dateArray.length;i++){
  24. obj=new Object();
  25. obj.planTime=dateArray[i];
  26. obj.planWeek=weekArray[i];
  27. obj.jcType=jcTypeArray[i];
  28. obj.jcNum=jcNumArray[i];
  29. obj.xcxc=xcxcArray[i];
  30. obj.kilometre=kilometreArray[i];
  31. obj.kcArea=kcAreaArray[i];
  32. obj.comments=commentsArray[i];
  33. objArray.push(obj);
  34. }
  35. JSONObj.jsonStr=JSON.stringify(objArray);
  36. return JSONObj;
  37. }

实现的大致思路是将每列字段的数据都封装到一个数组当中,因为空字符串也是需要的"",所以根据下标就可以取得相应的值,然后把每行的值封装为一个Object对象,给Object动态添加属性和相应的值,也就是所谓的key/value形式,在这里我得到的JSONObj数据的形式大致如下:

{"start_time":"2013-06-19",

"end_time":"2013-08-20",

"title":"2013-06-19至2013-08-20检修计划",

"jsonStr":[{"jcType":"SS3","jcNum":1234,"comments":"test1"....},

{"jcType":"DDD","jcNum":2365,"comments":"test2"....}....]

};

这样封装,是根据项目需求封装的,使用ajax请求action,将数据发送过去:

  1. $.ajax({
  2. type:"POST",
  3. url:"planManage!savePlan.do",
  4. data:JSONObj,
  5. dataType:"text",
  6. success:function(data){
  7. alert(data);
  8. }
  9. });

我们在后台接收:

  1. String startTime=request.getParameter("start_time");
  2. String endTime=request.getParameter("end_time");
  3. String planTitle=request.getParameter("plan_title");
  4. String jsonStr=request.getParameter("jsonStr");

startTime、endTime、title都是可以接收到相应的数据的,因为JSON封装后的数据本来就是键值对的形式,当我们接收jsonStr的时候,发现jsonStr显示为null,表明我们不能通过AJax将数组对象数据传递到后台去,因为它不支持,所以我们需要使用JSONObj.jsonStr=JSON.stringify(objArray);将这个数组对象转换为字符串,然后传递到后台就可以接收了,后台接收后显示的信息是多个对象的字符串信息:

{"jcType":"SS3","jcNum":1234,"comments":"test1"....},{"jcType":"DDD","jcNum":2365,"comments":"test2"....}....

我们使用org.json包下相应的类就可以解析我们的字符串JSON数据:

  1. JSONArray jsonArray=new JSONArray(jsonStr);
  2. JSONObject jsonObject=null;
  3. MainPlanDetail mainPlanDetail=null;
  4. List<MainPlanDetail> list=new ArrayList<MainPlanDetail>();
  5. for(int i=0;i<jsonArray.length();i++){
  6. jsonObject=jsonArray.optJSONObject(i);
  7. mainPlanDetail=new MainPlanDetail();
  8. mainPlanDetail.setPlanTime(jsonObject.optString("planTime"));
  9. mainPlanDetail.setPlanWeek(jsonObject.optString("planWeek"));
  10. mainPlanDetail.setJcType(jsonObject.optString("jcType"));
  11. mainPlanDetail.setJcNum(jsonObject.optString("jcNum"));
  12. mainPlanDetail.setXcxc(jsonObject.optString("xcxc"));
  13. mainPlanDetail.setKilometre(jsonObject.optString("kilometre"));
  14. mainPlanDetail.setKcArea(jsonObject.optString("kcArea"));
  15. mainPlanDetail.setComments(jsonObject.optString("comments"));
  16. mainPlanDetail.setIsCash(0);
  17. mainPlanDetail.setNum(i+1);
  18. list.add(mainPlanDetail);
  19. }

我的逻辑是解析后封装为对象做相应的逻辑处理,jsonObject.optString("planWeek"))与jsonObject.getString("planWeek"))的区别是optString中不存在该字段是返回"",而getString则会出现异常信息!这样我们封装的JSON对象或者JSON数组都能通过前台AJax传入到后台了;

注意:在IE测试中,发现JSON.stringify不兼容IE6、7,就是说在IE6、7下使用会报错:找不到JSON对象,在网上找了相关资料,我们需要引入一个包,json2.js,可以在我的博客中进行下载:http://download.csdn.net/detail/harderxin/6735339

关于JSON.stringify()方法的详解参考:http://www.jb51.net/article/29893.htm

拓展:

JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串

JSON.parse(), 将JSON数据解析为js原生值

toJSON(), 作为JSON.stringify中第二个参数(函数过滤器)补充

大家可以去尝试一下!!

jquey ajax 将变量值封装json传入JAVA action获取解析的更多相关文章

  1. 如何使用ajax将json传入后台数据

    首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置: 对$.ajax()的解析: $.ajax({ type: "POST", //提交方式 co ...

  2. jmeter后置处理器 JSON Extractor取多个变量值

    1.需要获取响应数据的请求右键添加-后置处理器-JSON Extractor 2.如果要获取json响应数据多个值时,设置的Variable names (后续引用变量值的变量名设置)与JSON Pa ...

  3. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  4. SpringMVC——对Ajax的处理(包含 JSON 类型)

    一.首先要搞明白的一些事情. 1.从客户端来看,需要搞明白: (1)要发送什么样格式的 JSON 数据才能被服务器端的 SpringMVC 很便捷的处理,怎么才能让我们写更少的代码,如何做好 JSON ...

  5. 动态修改 NodeJS 程序中的变量值

    如果一个 NodeJS 进程正在运行,有办法修改程序中的变量值么?答案是:通过 V8 的 Debugger 接口可以!本文将详细介绍实现步骤. 启动一个 HTTP Server 用简单的 Hello ...

  6. 快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)

    (转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 ...

  7. Ajax原理,技术封装与完整示例代码

    在做项目和学习的时候,经常用到Ajax的相关技术,但是这方面的技术总是运用的不是十分好,就寻找相关博客来学习加深Ajax技术相关. 一.Ajax简介 二.同步.异步传输区别 2.1 异步传输 2.2 ...

  8. 对ajax请求的简单封装,操作更方便

    我这里的接口数据调用的js叫interface.js,接口路径管理的js叫webSiteControl.js /** * Created by l2776 on 2017/7/11. * 接口数据调用 ...

  9. ajax的三次封装简单概况

    原生ajax:                readyState         准备状态                status             页面状态               ...

随机推荐

  1. FTP和HTTP

    一.字面上来看 HTTP是Hyper Text Transfer Protocol,超文本传输协议: FTP是File Transfer Protocol,文件传输协议: 简单说HTTP是面向网页的, ...

  2. sql优化从300秒到7秒

    原始sql select b.jd 街道,b.rglm 楼宇,zzrl 楼宇编号,count(oname) 入楼企业总数, (select count(oname) from ${tablename} ...

  3. .NET CORE 配置Swagger文档

    1.先通过NuGet安装Swashbuckle.AspNetCore ,支持.NET core,版本是4.0.1,以上版本好像有些功能不支持 2.startup文件里注入swagger,Configu ...

  4. DevOps专题 | 大型企业级监控系统设计

    10月30日,全球权威数据调研机构IDC正式发布<IDCMarketScape: 中国DevOps云市场2019,厂商评估>报告.京东云凭借丰富的场景和实践能力,以及高质量的服务交付和平台 ...

  5. 106.HttpResponse对象详解

    HttpResponse对象 Django服务器接收到客户端发送过来的请求之后,会将提交上来的这些数据封装成一个HttpResquest对象传给视图函数.那么视图函数在处理完成相关的逻辑后,也需要返回 ...

  6. i++ 和 ++i 的区别和实现

    ++i 和 i++ ++i 和 i++ 的区别 1)i++ 返回的是 i 的值,++i 返回的是 i+1 的值 2)i++ 不能用作左值,++i 可以用作左值 左值和右值的区别是什么? 根本区别是:能 ...

  7. 题解 P2738 【[USACO4.1]篱笆回路Fence Loops】

    这题是我期中测试的一题水题,然而英文题目太长了不想读...后面考完被同学提醒后20分钟切了(心塞) 切完看了波题解,发现貌似我的方法跟大家都不一样呢... 常规做法: \(Floyd\) 这个有三页的 ...

  8. ZJNU 1067 - 约瑟夫——中级

    打表处理(否则Case 1超时) 对m进行枚举,每次枚举进行一次判断 因为好人坏人均为k个,那么只要让下一个死亡的人的位置p保证在1~剩余坏人数量之间即可,不满足则直接break枚举下一个m 实际上对 ...

  9. NOIp2017TG解题报告

    NOIp2018RP++! 虽然没去但还得写写QAQ D1T1 : 小凯的疑惑 数学题 手推几组数据然后发现规律 \(Ans = (a-1)(b-1)+1\) AC in 1minite D1T2 : ...

  10. iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码

    iOS精选源码 APP启动视频 自定义按钮,图片可调整图文间距SPButton 一款定制性极高的轮播图,可自定义轮播图Item的样式(或只... iOS 筛选菜单 分段选择器 仿微信导航栏的实现,让你 ...