jquey ajax 将变量值封装json传入JAVA action获取解析
最近在做一个小小的功能模块,前台有很多的数据需要传入到后台,前台页面设计如下:
看起来不是很清楚,总之表单中的数据都要提交到后台进行处理,然后插入到数据库,而且是一起提交到后台的,实现的方法大致有两种:(在处理类似需求,如果大家有其他意见,可以一起来交流分享)
1)通过表单提交,当然在后台需要为每个字段定义一个集合对象,然后在页面中使用name标志,如果使用了strut2的话就更简单了,在Action中定义的集合对象名称和页面标签的name字段标签一致,那么这些数据在后台就都能够取得到了,这里就不进行阐述了;
2)封装JSON对象,然后通过Ajax方法提交到后台,将每行记录封装为一个JSON对象,然后把这些JSON对象加入到一个数组当中,核心代码如下:
- //封装JSON数组对象
- function getJSONObject(){
- var dateArray=getArrayByName("plan_date");
- var weekArray=getArrayByName("plan_week");
- var jcTypeArray=getArrayByName("jcType");
- var jcNumArray=getArrayByName("jcNum");
- var xcxcArray=getArrayByName("xcxc");
- var kilometreArray=getArrayByName("kilometre");
- var kcAreaArray=getArrayByName("kcArea");
- var commentsArray=getArrayByName("comments");
- var startTime=$("#startTime").val();
- var endTime=$("#endTime").val();
- var plan_title=$("#plan_title").val();
- var objArray=[];
- var obj=null;
- var JSONObj=new Object();
- JSONObj.start_time=startTime;
- JSONObj.end_time=endTime;
- if(plan_title==""){
- plan_title=startTime+"至"+endTime+"检修计划";
- }
- JSONObj.plan_title=plan_title;
- for(var i=0;i<dateArray.length;i++){
- obj=new Object();
- obj.planTime=dateArray[i];
- obj.planWeek=weekArray[i];
- obj.jcType=jcTypeArray[i];
- obj.jcNum=jcNumArray[i];
- obj.xcxc=xcxcArray[i];
- obj.kilometre=kilometreArray[i];
- obj.kcArea=kcAreaArray[i];
- obj.comments=commentsArray[i];
- objArray.push(obj);
- }
- JSONObj.jsonStr=JSON.stringify(objArray);
- return JSONObj;
- }
实现的大致思路是将每列字段的数据都封装到一个数组当中,因为空字符串也是需要的"",所以根据下标就可以取得相应的值,然后把每行的值封装为一个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,将数据发送过去:
- $.ajax({
- type:"POST",
- url:"planManage!savePlan.do",
- data:JSONObj,
- dataType:"text",
- success:function(data){
- alert(data);
- }
- });
我们在后台接收:
- String startTime=request.getParameter("start_time");
- String endTime=request.getParameter("end_time");
- String planTitle=request.getParameter("plan_title");
- 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数据:
- JSONArray jsonArray=new JSONArray(jsonStr);
- JSONObject jsonObject=null;
- MainPlanDetail mainPlanDetail=null;
- List<MainPlanDetail> list=new ArrayList<MainPlanDetail>();
- for(int i=0;i<jsonArray.length();i++){
- jsonObject=jsonArray.optJSONObject(i);
- mainPlanDetail=new MainPlanDetail();
- mainPlanDetail.setPlanTime(jsonObject.optString("planTime"));
- mainPlanDetail.setPlanWeek(jsonObject.optString("planWeek"));
- mainPlanDetail.setJcType(jsonObject.optString("jcType"));
- mainPlanDetail.setJcNum(jsonObject.optString("jcNum"));
- mainPlanDetail.setXcxc(jsonObject.optString("xcxc"));
- mainPlanDetail.setKilometre(jsonObject.optString("kilometre"));
- mainPlanDetail.setKcArea(jsonObject.optString("kcArea"));
- mainPlanDetail.setComments(jsonObject.optString("comments"));
- mainPlanDetail.setIsCash(0);
- mainPlanDetail.setNum(i+1);
- list.add(mainPlanDetail);
- }
我的逻辑是解析后封装为对象做相应的逻辑处理,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获取解析的更多相关文章
- 如何使用ajax将json传入后台数据
首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置: 对$.ajax()的解析: $.ajax({ type: "POST", //提交方式 co ...
- jmeter后置处理器 JSON Extractor取多个变量值
1.需要获取响应数据的请求右键添加-后置处理器-JSON Extractor 2.如果要获取json响应数据多个值时,设置的Variable names (后续引用变量值的变量名设置)与JSON Pa ...
- 对jquery的ajax进行二次封装
第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...
- SpringMVC——对Ajax的处理(包含 JSON 类型)
一.首先要搞明白的一些事情. 1.从客户端来看,需要搞明白: (1)要发送什么样格式的 JSON 数据才能被服务器端的 SpringMVC 很便捷的处理,怎么才能让我们写更少的代码,如何做好 JSON ...
- 动态修改 NodeJS 程序中的变量值
如果一个 NodeJS 进程正在运行,有办法修改程序中的变量值么?答案是:通过 V8 的 Debugger 接口可以!本文将详细介绍实现步骤. 启动一个 HTTP Server 用简单的 Hello ...
- 快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)
(转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 ...
- Ajax原理,技术封装与完整示例代码
在做项目和学习的时候,经常用到Ajax的相关技术,但是这方面的技术总是运用的不是十分好,就寻找相关博客来学习加深Ajax技术相关. 一.Ajax简介 二.同步.异步传输区别 2.1 异步传输 2.2 ...
- 对ajax请求的简单封装,操作更方便
我这里的接口数据调用的js叫interface.js,接口路径管理的js叫webSiteControl.js /** * Created by l2776 on 2017/7/11. * 接口数据调用 ...
- ajax的三次封装简单概况
原生ajax: readyState 准备状态 status 页面状态 ...
随机推荐
- 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计
EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value 前三个值的默认值都为false ...
- 【无网条件下】Linux系统、jdk、redis及集群、rabbitmq、nginx、weblogic和oracle安装及配置
本篇文章为原创,仅供参考使用,如果需要文章中提到的所有软件安装包和依赖包(即data),请以博客园邮箱联系获取链接. 准备资料 软件 主要软件包版本 路径 系统镜像 CentOS-6.10-x86_6 ...
- Arduino IIC 主从设备连接通信
目的: 实现Arduino主从设备之间的互相IIC通信,掌握IIC通信协议的使用方法. 器材: Arduino UNO R3 一块 Arduino Nano 三块 面包板 导线 3K ...
- Python 时间 time
import time print time.strftime("%Y-%m-%d") import datetime print datetime.datetime.now() ...
- 牛逼了,用Python破解wifi密码
Python真的是无所不能,原因就是因为Python有数目庞大的库,无数的现成的轮子,让你做很多很多应用都非常方便.wifi跟我们的生活息息相关,无处不在.今天从WiFi连接的原理,再结合代码为大家详 ...
- nodejs(6)express学习
1.简单认识express express::一个快速的网站开发框架,封装了原生的http模块,用起来更方便:API更人性化 特点 基于Node.js平台之上,进一步封装了 http 模块,从而提供了 ...
- UVA-101 The Blocks Problem 栈模拟
终于AC了,这道题目去年寒假卡得我要死,最后一气之下就不做了...想想居然一年之久了,我本来都快忘了这道题了,最近发现白书的奥秘,觉得刘汝佳的题目真的相当练思维以及对代码的操作,决定又刷起题目来,这时 ...
- 落地即王道,锁死企业智变CP——云+AI
国庆前夜,"70年,我是主角"的微电影引发网络热议,这是人民日报新媒体和电影频道联手打造.京东云和京东AI提供技术支持.这是中国首部全民定制国庆献礼片,网友只要上传正脸照片,就能通 ...
- SQL基础教程(第2版)第8章 SQL高级处理:练习题
本题中 SELECT 语句的含义是“按照商品编号(product_id)的升序进行排序, 计算出截至当前行的最高销售单价”.因此,在显示出最高销售单价的同时,窗口函 数的返回结果也会变化.这恰好和奥运 ...
- CAR-T|Single cell plan|Extracellular RNA|
生物医疗大数据 安吉丽娜朱莉发现抑癌基因事件,BRCA突变与乳腺癌关联. 个体化测序商品23 and me 多组学数据研究:eg:太空和地球双胞胎发现生化指标差不多. 研究模式和工业模式相结合. 研究 ...