資料庫中有四張表，分別為：員工基本資訊、教育經歷、工作經歷、聯絡人，

我要在一個頁面中填入四張表的資訊，其中教育、工作、聯絡人是多對一的關係，

因此，我設定了四個表單，分別為：

頁面是這樣的：

當點選“新增教育”，就會動態生成又一張“教育資訊”表單，注意，它們的id屬性是一樣的：

$(document).ready(function(){
  $("#addedu").click(function(){
	 
    $("#edu-form").append($("#edu-form").clone());
  });
})
 

這個時候有個問題，它們的id號是相同的，我如何分別獲取它們的資料呢？

用$("[id=edu-form]")，而不能用$("#edu-form")，我不知道是什麼原因，反正，前者可以獲取到一個數組，陣列中的第一個元素就是第一個“教育資訊”表單，第二個元素就是第二個相同id的表單，而用$("#edu-form")得到卻不是陣列。

還有一個坑，取這個陣列中的第i個元素不能用[i]，而要用.eq(i)，var edus=$("[id=edu-form]");要取第一個元素，用edus[0]不可以， 要edus.eq(0)才可以。

那怎麼把這個表單中的資料搞成json呢？

用serializeArray()將該表單序列化成name-value陣列，再遍歷這個陣列，把所有的鍵值對收集到一個json物件中：

var arr=forms.eq(j).serializeArray();//將該表單序列化成name-value陣列
 var obj=new Object() ;//生成一個json
 for(var i=0;i<arr.length;i++){//對name-value陣列的每一項
    obj[arr[i].name]=arr[i].value;//作為json的欄位
 

這樣很麻煩，但沒辦法，我百度找不到更好的方法。

然後構造出最終的json，這個最終的json就是要傳給後臺的：

var data=new Object();//最終要傳給後臺的json物件，四個鍵分別對應資料庫的四張表
  data["emp"]=toJsonArr($("[id=emp-form]"));
   data["eduArr"]=toJsonArr($("[id=edu-form]"));
   data["expArr"]=toJsonArr($("[id=exp-form]"));
 data["cntArr"]=toJsonArr($("[id=cnt-form]"));


function toJsonArr(forms){//傳入id相同的表單陣列
var JsonArr=new Array();//要返回的json陣列
 for(var j=0;j<forms.length;j++){//對每個表單
 var arr=forms.eq(j).serializeArray();//將該表單序列化成name-value陣列
 var obj=new Object() ;//生成一個json
 for(var i=0;i<arr.length;i++){//對name-value陣列的每一項
    obj[arr[i].name]=arr[i].value;//作為json的欄位
 }
 JsonArr[j]=obj;//將這個表單轉化後的json放進陣列。
 }
 return JsonArr;//返回json陣列
}
 

不能用jsp的form表單提交了，只能用ajax，而且還要把json物件搞成json字串再傳給後臺：

$.ajax({
        type: "POST",
        url: "${ctx }/admin/employee/saveAll",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),//把json物件轉成字串
        dataType: "json",
        success: function (msg) {
            
                alert(msg);
            
        },
        error: function (message) {
            alert("提交資料失敗！");
        }
    });
 

後臺得到的資料如下：

{"cntArr":[{"name":"","relation":"","phone":"","address":""}],"eduArr":[{"start":"","end":"","major":"","record":"","certificate":""}],"emp":[{"position":"","name":"cccccccccccccccccccccccc","birth":"","sex":"","height":"","weight":"","place":"","nation":"","phone":"","iDCard":"","school":"","major":"","education":"","location":"","address":"","wechat":"","email":"","marry":"","inTime":"","status":"1"}],"expArr":[{"reason":"ooo","company":"","work":"","position":"","start":"","end":""},{"reason":"mmmmmmmmmmmmmmmmm","company":"","work":"","position":"","start":"","end":""}]}

那麼問題來了，怎麼把它們搞成java物件呢，也就是Pojo、vo、po、dto，就是對應著資料庫中的一張表的一個類，

有四個類：分別對應資料庫的四張表

可以用fastjson，

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

這樣就得到了前端頁面中“教育資訊”這幾個表單所填寫的資訊，而且在for迴圈中一次處理一個表單，不會混淆，

得到了dto物件，想怎麼插就怎麼插，到這裡就做完了。

有幾個問題沒有解決：

eclipse寫jsp、js、jquery沒有程式碼提示功能，

每次改了java程式碼都要重啟jetty