html中ajax增删改查,json+ajax实现的增删改查的方法

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":"+ request.getServerPort()

+ path + "/";

%>

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

">

My JSP 'emp.jsp'starting page

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 

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 

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) {

case1:

pageinfo.nowpage = 1;

break;

case2:

pageinfo.nowpage--;

break;

case3:

pageinfo.nowpage++;

break;

case4:

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";

}

}

.asc {

background-p_w_picpath: url(p_w_picpaths/asc.gif);

background-repeat: no-repeat;

}

.desc {

background-p_w_picpath: url(p_w_picpaths/desc.gif);

background-repeat: no-repeat;

}

显示所有的员工信息

员工信息表

编号

width="55px">

姓名

岗位

入职时间

领导

薪水

奖金

部门

操作

首页

上一页

下一页

末页

编号
姓名
岗位
入职时间
领导
薪水
奖金
部门	请选择部门
οnclick="tijiao()"/> οnclick="update()"/>