javaweb训练题：后台管理系统的员工添加功能（jquery克隆、前台json序列化、后台反序列化）

数据库中有四张表，分别为：员工基本信息、教育经历、工作经历、联系人，

我要在一个页面中填入四张表的信息，其中教育、工作、联系人是多对一的关系，

因此，我设置了四个表单，分别为：

页面是这样的：

当点击“添加教育”，就会动态生成又一张“教育信息”表单，注意，它们的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

javaweb训练题：后台管理系统的员工添加功能（jquery克隆、前台json序列化、后台反序列化）

猜你喜欢