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