json+ajax实现的增删改查

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'emp.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

		<script type="text/javascript" src="./js/util.js">
</script>
		<script>
window.onload = function() {
	document.getElementById("addemp").style.display = "none";
}
var pageinfo;

function findAll(nowpage) {
	//获取xhr对象
	var xhr = getXhr();
	//封装请求信息
	xhr.open("get", "./listEmp.do?nowpage=" + nowpage, true);

	//发送请求
	xhr.send();

	//相应
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {

			var jsonResponse = eval("(" + xhr.responseText + ")");

			//获取写入的tbody的DOM对象
			cha(jsonResponse);

		}
	}
}

function cha(jsonResponse) {
	var listemps = $("listemps");
	listemps.innerHTML = "";
	for ( var i = 0; i < jsonResponse.length; i++) {
		var emptr = document.createElement("tr");

		var empno = document.createElement("td");
		var ename = document.createElement("td");
		var job = document.createElement("td");
		var hiredate = document.createElement("td");
		var mgr = document.createElement("td");
		var sal = document.createElement("td");
		var comm = document.createElement("td");
		var deptno = document.createElement("td");
		var cz = document.createElement("td");
		empno.appendChild(document.createTextNode(jsonResponse[i].empno));
		ename.appendChild(document.createTextNode(jsonResponse[i].ename));
		job.appendChild(document.createTextNode(jsonResponse[i].job));
		var a = (jsonResponse[i].hiredate.year + 1900) + "年"
				+ (jsonResponse[i].hiredate.month + 1) + "月"
				+ jsonResponse[i].hiredate.date + "日";
		hiredate.appendChild(document.createTextNode(a));
		mgr.appendChild(document.createTextNode(jsonResponse[i].mgr));
		sal.appendChild(document.createTextNode(jsonResponse[i].sal));
		comm.appendChild(document.createTextNode(jsonResponse[i].comm));
		deptno.appendChild(document.createTextNode(jsonResponse[i].deptno));
		var udmp = document.createElement("input");
		var delmp = document.createElement("input");
		delmp.setAttribute("type", "button");
		udmp.setAttribute("type", "button");
		delmp.setAttribute("value", "删除");
		udmp.setAttribute("value", "编辑");

		emptr.appendChild(empno);
		emptr.appendChild(ename);
		emptr.appendChild(job);
		emptr.appendChild(hiredate);
		emptr.appendChild(mgr);
		emptr.appendChild(sal);
		emptr.appendChild(comm);
		emptr.appendChild(deptno);
		cz.appendChild(udmp);
		cz.appendChild(delmp);
		emptr.appendChild(cz);
		listemps.appendChild(emptr);

		delmp.onclick = function() {
			if (window.confirm("您确定删除??")) {
				var empno = this.parentNode.parentNode.firstChild.innerHTML;
				listemps.innerHTML = "";
				var xhr = getXhr();
				//封装请求信息
				xhr.open("get", "./DelEmp.do?empno=" + empno, true);

				//发送请求
				xhr.send();

				//相应
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var jsonResponse = eval("(" + xhr.responseText + ")");

						//获取写入的tbody的DOM对象
						cha(jsonResponse);
					}
				}
			}

		}

		udmp.onclick = function() {
			document.getElementById("addemp").style.display = "block";
			document.getElementById("a").style.display = "none";
			document.getElementById("b").style.display = "block";
			var empno = this.parentNode.parentNode.firstChild.innerHTML;
			var xhr = getXhr();
			//封装请求信息
			xhr.open("get", "./DeptServlet.do?empno=" + empno, true);

			//发送请求
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {

					var jsonResponse1 = eval("(" + xhr.responseText + ")");

					document.getElementById("empno").value = jsonResponse1.empno;

					document.getElementById("ename").value = jsonResponse1.ename;

					document.getElementById("job").value = jsonResponse1.job;

					var a = (jsonResponse1.hiredate.year + 1900) + "-"
							+ (jsonResponse1.hiredate.month + 1) + "-"
							+ jsonResponse1.hiredate.date;

					document.getElementById("hiredate").value = a;

					document.getElementById("mgr").value = jsonResponse1.mgr;

					document.getElementById("sal").value = jsonResponse1.sal;

					document.getElementById("comm").value = jsonResponse1.comm;

					select(xhr, jsonResponse[i].deptno);
				}
			}
		}

		pageinfo = jsonResponse[jsonResponse.length - 1];

	}
}

function update() {
	if (window.confirm("您确定修改??")) {
		listemps.innerHTML = "";
		var xhr = getXhr()
		var empno = document.getElementById("empno").value;
		var ename = document.getElementById("ename").value;
		var job = document.getElementById("job").value;
		var hiredate = document.getElementById("hiredate").value;
		var mgr = document.getElementById("mgr").value;
		var sal = document.getElementById("sal").value;
		var comm = document.getElementById("comm").value;
		var deptno = document.getElementById("sel").value;
		xhr
				.open("get", "./UpdateEmp.do?empno1=" + empno + "&ename1="
						+ ename + "&job1=" + job + "&hiredate1=" + hiredate
						+ "&mgr1=" + mgr + "&sal1=" + sal + "&comm=" + comm
						+ "&deptno1=" + deptno, true);

		xhr.send();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				cha();
			}
		}
	}
}

function tijiao() {

	var xhr = getXhr()
	var empno = document.getElementById("empno").value;
	var ename = document.getElementById("ename").value;
	var job = document.getElementById("job").value;
	var hiredate = document.getElementById("hiredate").value;
	var mgr = document.getElementById("mgr").value;
	var sal = document.getElementById("sal").value;
	var comm = document.getElementById("comm").value;
	var deptno = document.getElementById("sel").value;

	xhr.open("get", "./AddEmp.do?empno1=" + empno + "&ename1=" + ename
			+ "&job1=" + job + "&hiredate1=" + hiredate + "&mgr1=" + mgr
			+ "&sal1=" + sal + "&comm=" + comm + "&deptno1=" + deptno, true);
	xhr.send();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			findAll(1);
		}
	}

}
function addEmp() {

	document.getElementById("addemp").style.display = "block";
	document.getElementById("b").style.display = "none";
	document.getElementById("a").style.display = "block";
	var sel = document.getElementById("sel");
	var xhr = getXhr()
	select(xhr, "")

}
function select(xhr, vaule) {

	xhr.open("get", "./Dept.do", true);
	xhr.send();

	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {

			var jsonResponse = eval("(" + xhr.responseText + ")");
			c = jsonResponse;
			for ( var i = 0; i < jsonResponse.length; i++) {
				var emptr = document.createElement("option");
				if (vaule == jsonResponse[i].deptno) {
					emptr.appendChild(document
							.createTextNode(jsonResponse[i].dname));
					emptr.setAttribute("value", jsonResponse[i].deptno);
					emptr.setAttribute("selected", true);
				} else {
					emptr.appendChild(document
							.createTextNode(jsonResponse[i].dname));
					emptr.setAttribute("value", jsonResponse[i].deptno);
				}
				sel.appendChild(emptr);
			}
		}
	}

}
function getpageInfo(oper) {

	switch (oper) {
	case 1:
		pageinfo.nowpage = 1;
		break;
	case 2:
		pageinfo.nowpage--;
		break;
	case 3:
		pageinfo.nowpage++;
		break;
	case 4:
		pageinfo.nowpage = pageinfo.countpage;
		break;
	}

	findAll(pageinfo.nowpage);

}

function changeTest() {

	if ($("ordername").className == "asc") {
		$("ordername").className = "desc";

		//获取xhr对象
		var xhr = getXhr();
		//封装请求信息
		xhr.open("get", "./listEmp.do?nowpage=" + nowpage+"&lob=asc", true);

		//发送请求
		xhr.send();

		//相应
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {

				var jsonResponse = eval("(" + xhr.responseText + ")");

				//获取写入的tbody的DOM对象
				cha(jsonResponse);

			}
		}

	} else {
		$("ordername").className = "asc";

	}

}
</script>

		<style>
.asc {
	background-image: url(images/asc.gif);
	background-repeat: no-repeat;
}

.desc {
	background-image: url(images/desc.gif);
	background-repeat: no-repeat;
}
</style>
	</head>

	<body>
		<div>
			<h1>
				显示所有的员工信息
			</h1>

			<input type="button" value="采用JSON返回数据显示所有的员工信息" onclick="findAll(1)" />
			<input type="button" value="添加用户" onclick="addEmp()" />
			<div>
				<table border="1px" cellpadding="0" cellspacing="0">

					<caption>
						员工信息表
					</caption>
					<thead>
						<tr>
							<th>
								编号
							</th>
							<th class="asc" id="ordername" onclick="changeTest()"
								width="55px">
								姓名
							</th>
							<th>
								岗位
							</th>
							<th>
								入职时间
							</th>
							<th>
								领导
							</th>
							<th>
								薪水
							</th>
							<th>
								奖金
							</th>
							<th>
								部门
							</th>
							<th>
								操作
							</th>
						</tr>
					</thead>
					<tbody id="listemps">

					</tbody>
				</table>
			</div>
			<div>
				<a href="javascript:getpageInfo(1)">首页</a>
				<a href="javascript:getpageInfo(2)">上一页</a>
				<a href="javascript:getpageInfo(3)">下一页</a>
				<a href="javascript:getpageInfo(4)">末页</a>
			</div>
			<div id="addemp">
				<table width="410" height="198" border="1" align="center">
					<tr>
						<td width="135" align="right">
							编号
						</td>
						<td width="259">
							<label>
								<input type="text" name="empno" id="empno" />
							</label>
						</td>
					</tr>
					<tr>
						<td align="right">
							姓名
						</td>
						<td>
							<input type="text" name="ename" id="ename" />
						</td>
					</tr>
					<tr>
						<td align="right">
							岗位
						</td>
						<td>
							<input type="text" name="job" id="job" />
						</td>
					</tr>
					<tr>
						<td align="right">
							入职时间
						</td>
						<td>
							<input type="text" name="hiredate" id="hiredate" />
						</td>
					</tr>
					<tr>
						<td align="right">
							领导
						</td>
						<td>
							<input type="text" name="mgr" id="mgr" />
						</td>
					</tr>
					<tr>
						<td height="25" align="right">
							薪水
						</td>
						<td>
							<input type="text" name="sal" id="sal" />
						</td>
					</tr>
					<tr>
						<td height="11" align="right">
							奖金
						</td>
						<td>
							<input type="text" name="comm" id="comm" />
						</td>
					</tr>
					<tr>
						<td height="12" align="right">
							部门
						</td>
						<td>
							<select id="sel">
								<option value="10">
									请选择部门
								</option>

							</select>


						</td>
					</tr>
					<tr>
						<td height="12" colspan="2" align="center">
							<input type="button" name="a" id="a" value="提交"
								onclick="tijiao()" />
							<input type="button" name="b" id="b" value="修改"
								onclick="update()" />

						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>
 只有JSP的javascript中的代码, 其他代码跟以前连接数据库时的代码是一样的,另外代码可能有一些BUG 望能提一下

你可能感兴趣的:(JavaScript,jsp,json,Ajax,css)