看起來不是很清楚,總之表單中的數據都要提交到后台進行處理,然后插入到數據庫,而且是一起提交到后台的,實現的方法大致有兩種:(在處理類似需求,如果大家有其他意見,可以一起來交流分享)
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中第二個參數(函數過濾器)補充
大家可以去嘗試一下!!