使用JavaScript+Ajax+Json实现的雇员信息管理系统(含分页)(附完整案例下载)
??????? 写完这个雇员信息管理系统后，让我感受最深的是JSON的数据结构确实比XML更为优秀，但这并意味着JSON就可以代替XML，而作为轻量级开发，JSON应是首选。总之，JavaScript+Ajax在解析JSON类型的数据方面真的比XML简单、容易。下面贴出一些核心代码及效果图，完整案例请在本文最后下载。
1、数据分页代码：
function empInfo(){var tbl = document.getElementById("tbl");tbl.style.display = "none";var xhr=getXhr();xhr.open("GET", "./employee.do?symbol=pageInfo&page=" + nowPage+ "&pageSize=" + pageSize, true);xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){var obj=eval("("+xhr.responseText+")");empInfoTool(obj);}}}2、获取总页数：?
//获取总页数function getCountPage(){var tbl = document.getElementById("tbl");tbl.style.display = "none";var countRecord=0;var xhr=getXhr();xhr.open("GET","./employee.do?symbol=findAll",true);xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){var obj=eval("("+xhr.responseText+")");countRecord=obj.length;countPage = (countRecord % pageSize == 0 ? countRecord / pageSize: Math.ceil(countRecord / pageSize));}}}?3、最为核心的代码：
//将雇员信息转化成页面表格显示function empInfoTool(obj){var itbody = document.getElementById("itbody");itbody.innerText = "";for(var i=0;i<obj.length;i++){var tr=document.createElement("tr");var delbtn = document.createElement("input");var upbtn = document.createElement("input");delbtn.setAttribute("type", "button");upbtn.setAttribute("type", "button");delbtn.setAttribute("value", "删除");upbtn.setAttribute("value", "编辑");var empno=document.createElement("td");var ename=document.createElement("td");var job=document.createElement("td");var mgr=document.createElement("td");var hiredate=document.createElement("td");var sal=document.createElement("td");var comm=document.createElement("td");var deptno=document.createElement("td");var udtd=document.createElement("td");empno.appendChild(document.createTextNode(obj[i].empno));ename.appendChild(document.createTextNode(obj[i].ename));job.appendChild(document.createTextNode(obj[i].job));mgr.appendChild(document.createTextNode(obj[i].mgr));var date=new Date(obj[i].hiredate.time);var str=getFormatDate(date);hiredate.appendChild(document.createTextNode(str));sal.appendChild(document.createTextNode(obj[i].sal));comm.appendChild(document.createTextNode(obj[i].comm));deptno.appendChild(document.createTextNode(obj[i].deptno));udtd.appendChild(upbtn);udtd.appendChild(delbtn);tr.appendChild(empno);tr.appendChild(ename);tr.appendChild(job);tr.appendChild(mgr);tr.appendChild(hiredate);tr.appendChild(sal);tr.appendChild(comm);tr.appendChild(deptno);tr.appendChild(udtd);itbody.appendChild(tr);//删除雇员信息delbtn.onclick=function(){var empno = this.parentNode.parentNode.firstChild.innerHTML;var xhr=getXhr();xhr.open("GET", "./employee.do?symbol=delete&empno="+ empno, true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {var obj=eval("("+xhr.responseText+")");empInfoTool(obj);}}}//更新雇员信息upbtn.onclick=function(){var tbl = document.getElementById("tbl");tbl.style.display = "block";var empno_tr=$("empno_tr");empno_tr.style.display="none";var addbtn=$("addbtn");addbtn.style.display="none";var tr_emp = this.parentNode.parentNode;var emp = tr_emp.childNodes;for ( var i = 0; i < emp.length - 1; i++) {if (emp[i].nodeType == 1) {switch (i) {case 0:$("empno").value = emp[i].innerHTML;break;case 1:$("ename").value = emp[i].innerHTML;break;case 2:$("job").value = emp[i].innerHTML;break;case 3:$("mgr").value = emp[i].innerHTML;break;case 4:$("hiredate").value = emp[i].innerHTML;break;case 5:$("sal").value = emp[i].innerHTML;break;case 6:$("comm").value = emp[i].innerHTML;break;case 7:var deptno = emp[i].innerHTML;var xhr = getXhr();xhr.open("GET", "./dept.do", true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4&& xhr.status == 200) {var obj = eval("("+xhr.responseText+")");DeptsInfo(obj, deptno);}}break;}}}}}//for循环结束var pagediv = document.getElementById("pagediv");if (!pagediv.hasChildNodes()) {displayPage();}//分页事件处理startPage.onclick = function() {nowPage = 1;empInfo();}pageUp.onclick = function() {if (nowPage - 1 > 1) {nowPage -= 1;} else {nowPage = 1;}empInfo();}pageDown.onclick = function() {if (nowPage + 1 >= countPage) {nowPage = countPage;} else {nowPage += 1;}empInfo();}endPage.onclick = function() {nowPage = countPage;empInfo();}}?4、部分servlet代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");request.setCharacterEncoding("utf-8");String symbol = request.getParameter("symbol");String pageNo = request.getParameter("page") == null ? "1" : request.getParameter("page");int nowPage = Integer.parseInt(pageNo);int pageSize = request.getParameter("pageSize") == null ? 5 : Integer.valueOf(request.getParameter("pageSize"));if ("findAll".equals(symbol)) {EmployeeService esi = new EmployeeServiceImpl();List<Employee> emps = esi.findAll();JSONArray ja = JSONArray.fromObject(emps);response.getWriter().print(ja);} else if ("pageInfo".equals(symbol)) {EmployeeService esi = new EmployeeServiceImpl();List<Employee> emps = esi.getNowPageInfo(nowPage, pageSize);JSONArray ja = JSONArray.fromObject(emps);response.getWriter().print(ja);} else if ("delete".equals(symbol)) {int empno = Integer.parseInt(request.getParameter("empno"));EmployeeService esi = new EmployeeServiceImpl();esi.deleteById(empno);request.getRequestDispatcher("./employee.do?symbol=pageInfo").forward(request, response);} else if ("update".equals(symbol)) {int empno = Integer.parseInt(request.getParameter("empno"));String ename = request.getParameter("ename");String job = request.getParameter("job");int mgr = Integer.valueOf(request.getParameter("mgr"));SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");Date hiredate = null;try {hiredate = sdf.parse(request.getParameter("hiredate"));} catch (ParseException e) {// TODO Auto-generated catch blocke.printStackTrace();}double sal = Double.valueOf(request.getParameter("sal"));double comm = Double.valueOf(request.getParameter("comm"));int deptno = Integer.valueOf(request.getParameter("deptno"));Employee employee = new Employee();employee.setEmpno(empno);employee.setEname(ename);employee.setJob(job);employee.setMgr(mgr);employee.setHiredate(hiredate);employee.setSal(sal);employee.setComm(comm);employee.setDeptno(deptno);EmployeeService esi = new EmployeeServiceImpl();esi.update(employee);request.getRequestDispatcher("./employee.do?symbol=pageInfo").forward(request, response);} else if ("add".equals(symbol)) {int empno = Integer.parseInt(request.getParameter("empno"));String ename = request.getParameter("ename");String job = request.getParameter("job");int mgr = Integer.valueOf(request.getParameter("mgr"));SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");Date hiredate = null;try {hiredate = sdf.parse(request.getParameter("hiredate"));} catch (ParseException e) {// TODO Auto-generated catch blocke.printStackTrace();}double sal = Double.valueOf(request.getParameter("sal"));double comm = Double.valueOf(request.getParameter("comm"));int deptno = Integer.valueOf(request.getParameter("deptno"));Employee employee = new Employee();employee.setEmpno(empno);employee.setEname(ename);employee.setJob(job);employee.setMgr(mgr);employee.setHiredate(hiredate);employee.setSal(sal);employee.setComm(comm);employee.setDeptno(deptno);EmployeeService esi = new EmployeeServiceImpl();esi.insert(employee);request.getRequestDispatcher("./employee.do?symbol=pageInfo").forward(request, response);}}?
另外还有Dao包下的实现代码，由于实在太多，这里就不再贴出来了，详细内容请下载完整案例。以下是效果图：
??
?
?
?下面是完整案例压缩包：