jquey ajax 將變數值封裝json傳入JAVA action擷取解析__架構

  最近在做一個小小的功能模組，前台有很多的資料需要傳入到後台，前台頁面設計如下：

看起來不是很清楚，總之表單中的資料都要提交到後台進行處理，然後插入到資料庫，而且是一起提交到背景，實現的方法大致有兩種：(在處理類似需求，如果大家有其他意見，可以一起來交流分享)

1）通過表單提交，當然在後台需要為每個欄位定義一個集合對象，然後在頁面中使用name標誌，如果使用了strut2的話就更簡單了，在Action中定義的集合對象名稱和頁面標籤的name欄位標籤一致，那麼這些資料在後台就都能夠取得到了，這裡就不進行闡述了；

2）封裝JSON對象，然後通過Ajax方法提交到後台，將每行記錄封裝為一個JSON對象，然後把這些JSON對象加入到一個數組當中，核心代碼如下： [javascript] view plain copy //封裝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，將資料發送過去： [javascript] view plain copy $.ajax({       type:"POST",       url:"planManage!savePlan.do",       data:JSONObj,       dataType:"text",       success:function(data){           alert(data);       }   });  

我們在後台接收： [java] view plain copy 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資料： [java] view plain copy 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中第二個參數(函數過濾器)補充

大家可以去嘗試一下。。