zoukankan      html  css  js  c++  java
  • jquey ajax 将变量值封装json传入JAVA action获取解析

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

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

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

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

    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
    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,将数据发送过去:

    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
    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中第二个参数(函数过滤器)补充

    大家可以去尝试一下!!

  • 相关阅读:
    Flink 双流合并之connect Demo2
    Flink 双流合并之connect Demo1
    Flink 双流合并Join
    Flink状态保存CheckPoint
    Flink状态之OperatorState
    Flink状态之AggregateState
    Flink状态之ReduceState
    Flink状态之MapState
    Flink状态之KeyedListState
    大数据框架环境安装与配置01--服务器基本设置
  • 原文地址:https://www.cnblogs.com/yangkai-cn/p/4016577.html
Copyright © 2011-2022 走看看