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 望能提一下