使用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.οnclick=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.οnclick=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 block
				e.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 block
				e.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包下的实现代码，由于实在太多，这里就不再贴出来了，详细内容请下载完整案例。以下是效果图：

  

 

 

 下面是完整案例压缩包：