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

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

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

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

[javascript] view plain copy
  1. //封装JSON数组对象
  2. functiongetJSONObject(){
  3. vardateArray=getArrayByName("plan_date");
  4. varweekArray=getArrayByName("plan_week");
  5. varjcTypeArray=getArrayByName("jcType");
  6. varjcNumArray=getArrayByName("jcNum");
  7. varxcxcArray=getArrayByName("xcxc");
  8. varkilometreArray=getArrayByName("kilometre");
  9. varkcAreaArray=getArrayByName("kcArea");
  10. varcommentsArray=getArrayByName("comments");
  11. varstartTime=$("#startTime").val();
  12. varendTime=$("#endTime").val();
  13. varplan_title=$("#plan_title").val();
  14. varobjArray=[];
  15. varobj=null;
  16. varJSONObj=newObject();
  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(vari=0;i<dateArray.length;i++){
  24. obj=newObject();
  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. returnJSONObj;
  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,将数据发送过去:

[javascript] view plain copy
  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. });

我们在后台接收:

[java] view plain copy
  1. StringstartTime=request.getParameter("start_time");
  2. StringendTime=request.getParameter("end_time");
  3. StringplanTitle=request.getParameter("plan_title");
  4. StringjsonStr=request.getParameter("jsonStr");

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

{"jcType":"SS3",{"jcType":"DDD","comments":"test2"....}....

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

[java] view plain copy
  1. JSONArrayjsonArray=newJSONArray(jsonStr);
  2. JSONObjectjsonObject=null;
  3. MainPlanDetailmainPlanDetail=null;
  4. List<MainPlanDetail>list=newArrayList<MainPlanDetail>();
  5. for(inti=0;i<jsonArray.length();i++){
  6. jsonObject=jsonArray.optJSONObject(i);
  7. mainPlanDetail=newMainPlanDetail();
  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. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  2. Swift 语言指南

    想快速找到优秀开源项目的开发者,可以访问我们额外整理的《Swift项目精选》。希望快速找到其中精选文章,可以访问《Swift文章精选》。其中包括:Swift概括,SwiftProgrammingLanguage,UsingSwiftwithCocoaandObjective-C2.SwiftProgrammingLanguage苹果官方文档:在线版(英文)|iBooks版(英文)爱好者翻译版:在线版(中文)By@Swift中文翻译组|PDF版By@老码团队|百度阅读版相关文档BasicOperators-

  3. SWIFT闭包,介绍,使用ALAMOFIRE封装 异步请求

    闭包说明:首先说明简明扼要的说明一下:闭包,可以看做JAVA中匿名函数。

  4. swift开源项目精选已经造好的轮子

    Swift开源项目精选站在个人的角度,并基于《Swift语言指南》,针对开源项目做了一个甄别、筛选。当然,由于个人能力及涉足范围所限,还远远不够,其中肯定有偏颇及不足,还望同学们多多见谅。更希望能得到你的帮助和补充,共同参与。@SwiftLanguage更新至2016-2-1,最近新收录Graph,Localize-Swift,Cuckoo,Gecco,AudioKit,vapor,Every.swift等7个,合计已收录297个。

  5. Swift - 异步获取网络数据封装类

    1,HttpController.swift123456789101112131415161718192021222324252627282930313233importUIKit//自定义http协议protocolHttpProtocol{//定义一个方法接收一个字典funcdidRecieveResults}classHttpController:NSObject{//定义一个可选代理vardelegate:?//定义一个方法运过来获取网络数据,接收参数为网址onSearch{//定义一个NSURL

  6. Swift 简单封装UISwipeGestureRecognizer + 闭包回调监听事件,便于不同场景的 UIView调用

    下面就是我们的UIView源文件调用啦:是的,就是这么简单。。手势不是目的,封装不是目的,目的是学会用闭包实现数据监听及传送数据。

  7. Swift 开源项目精选-v1.0

    转自http://dev.swiftguide.cn/archive/featured-open-source-projects-in-swift_v1.0.html目录工具存储网络图片框架界面示例应用工具SwiftyJSONBytangplin,lingoer:GitHub上最为开发者认可的JSON解析库ArgoBythoughtbot:函数式JSON解析库JSONCodableByMatthe

  8. swift请求数据的封装

  9. Swift 3.0封装 URLSession 的GET/SET方法代替 Alamofire

    升级到Swift3.0之后,新版本的Alamofire只支持iOS9.0以上的系统,如果要适配iOS8,需要自己封装URLSession,下面是笔者的方案:这里使用的是Swift自己的原生类型URLSession,而不是NSURLSession。所有重载版本的request方法最后都会返回一个DataRequest类型,这个DataRequest是Alamofire封装的request对象,绕的有点晕。

  10. Swift3.0服务端开发(五) 记事本的开发iOS端+服务端

    前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架。本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在《Swift3.0服务端开发(一)》这篇博客中已经简单的介绍过了,本篇博客就来详细的聊一下这个工程的具体实现细节。当然包括iOS端和服务端的代码。关于Swift3.0连接和操作MysqL的详细内容请参考上一篇博客《Swift3.0服务端开发(四)MysqL数据库的连接与操作》,数据库的连接在本部分就不做过多赘述了。

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部