Ajax实现增删改查 -

zpx138332

浏览: 46117 次
性别:
来自: 河北

最近访客更多访客>>

chen_vogue

esxd_2015

li315186166

runmu_79

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax实现增删改查

Ajax IE J#Firefox XML

<%@ 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 'index.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">

		<script src="./js/util.js" type="text/javascript">
</script>
		<script type="text/javascript">

window.onload = function() {
	$("addemp").style.display = "none";
	$("upemp").style.display="none";
}

function addEmp() {
    $("upemp").style.display="none";
	$("addemp").style.display = "block";
	//获取xhr对象
	var xhr = getXhr();
	//封装请求信息
	xhr.open("get", "./listDept.do", true);
	//发送请求
	xhr.send();
	//根据服务器端传递xhr.readyState触发的事件进行处理
	xhr.onreadystatechange = function() {
		//根据readyState是否处理完毕,status服务是否返回成功
		if (xhr.readyState == 4 && xhr.status == 200) {
			//获得xml的document对象
			var doc = xhr.responseXML;
			
			listDepts(doc,"");
		}
	}

}

function listDepts(doc,value){
//获取根节点
			var root = doc.documentElement;
			//获取根节点的子节点
			var depts = root.childNodes;
			
			//获取HTML dom 对象
			var deptnos = document.getElementById("deptno");
			//遍历
			for(var i=0;i<depts.length;i++){
			  
			  //判读是否是元素节点,目的是兼容各个浏览器
			  if(depts[i].nodeType == 1){
			    var dptoption = document.createElement("option");
			    var eles = depts[i].childNodes;
			    for(var j=0;j<eles.length;j++){
			       if(eles[j].nodeType ==1){
			         if(j==0){
			           if(value==eles[j].firstChild.nodeValue){
			            dptoption.setAttribute("selected",true);
			           }
			           dptoption.setAttribute("value",eles[j].firstChild.nodeValue);
			         }else if(j==1){
			           dptoption.appendChild(document.createTextNode(eles[j].firstChild.nodeValue));
			         }   
			       }
			           
			    }
			    deptnos.appendChild(dptoption);
			  }
			}
			

}
function selectEmp() {
	//获取xhr对象
	var xhr = getXhr();
	//封装请求信息
	xhr.open("get", "./listEmp.do", true);
	//发送请求
	xhr.send();
	//根据服务器端传递xhr.readyState触发的事件进行处理
	xhr.onreadystatechange = function() {
		//根据readyState是否处理完毕,status服务是否返回成功
		if (xhr.readyState == 4 && xhr.status == 200) {
			//获得xml的document对象
			var doc = xhr.responseXML;
			listEmps(doc);

		}
	}
}

function insertEmp() {

	//获取xhr对象
	var xhr = getXhr();
	//封装请求信息
	xhr.open("post", "./addEmp.do", true);
	var empno = $("eno").value;
	var ename = $("ename").value;
	var mgr = $("mgr").value;
	var hiredate = $("hiredate").value;
	var job = $("job").value;
	var sal = $("sal").value;
	var comm = $("comm").value;
	var deptno = $("deptno").value;
	var params = "empno=" + empno + "&ename=" + ename + "&mgr=" + mgr
			+ "&hiredate=" + hiredate + "&job=" + job + "&sal=" + sal
			+ "&comm=" + comm + "&deptno=" + deptno;
	//发送请求
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(params);
	xhr.onreadystatechange = function() {
		//根据readyState是否处理完毕,status服务是否返回成功
		if (xhr.readyState == 4 && xhr.status == 200) {
			//获得xml的document对象
			var doc = xhr.responseXML;
			listEmps(doc);
		}
	}
}

function listEmps(doc) {
	//获取xml文件的跟标签
	var root = doc.documentElement;
	//获取跟标签的所有子节点
	var emps = root.childNodes;
	//获取tbody对象
	var listemps = document.getElementById("listemps");
	
	listemps.innerHTML = "";
	for ( var i = 0; i < emps.length; i++) {
	
		//判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器
		if (emps[i].nodeType == 1) {
		    /**创建删除修改按钮*/
		   	var delbtn = document.createElement("input");
			var uptbtn = document.createElement("input");
			
			delbtn.setAttribute("type","button");
			uptbtn.setAttribute("type","button");
			delbtn.setAttribute("value","删除");
			uptbtn.setAttribute("value","修改");
			
			
		
			var emptr = document.createElement("tr");

			//获取该节点下面的所有子节点
			var empcs = emps[i].childNodes;
			for ( var j = 0; j < empcs.length; j++) {
				var emptd = document.createElement("td");
				//判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器
				if (empcs[j].nodeType == 1) {
					emptd.appendChild(document
							.createTextNode(empcs[j].firstChild.nodeValue));
				    
					emptr.appendChild(emptd);
				}
			
			}
			var dutd = document.createElement("td");
			
			dutd.appendChild(delbtn);
			dutd.appendChild(uptbtn);
			
			/**员工删除操作*/
			delbtn.onclick = function (){
			  var empno = this.parentNode.parentNode.firstChild.innerHTML;
			 //获取xhr对象
			 var xhr = getXhr();
			 //封装请求信息
			 xhr.open("get", "./delEmp.do?empno="+empno, true);
			 //发送请求
			 xhr.send();
			 //根据服务器端传递xhr.readyState触发的事件进行处理
			xhr.onreadystatechange = function() {
				//根据readyState是否处理完毕,status服务是否返回成功
				if (xhr.readyState == 4 && xhr.status == 200) {
					//获得xml的document对象
					var doc = xhr.responseXML;
					listEmps(doc);
		
				}
			}
			 
			
			}
			/**员工修改操作*/
			uptbtn.onclick = function(){
			  $("addemp").style.display = "block";
			  $("iemp").style.display="none";
			  $("upemp").style.display="block";
			  
			  var emp = this.parentNode.parentNode;
			  var eles = emp.childNodes;
			  for(var i=0;i<eles.length-1;i++){
			  
			     if(eles[i].nodeType==1){
			        switch(i){
			          case 0:
			            $("eno").value=eles[i].innerHTML;
			          break;
			          case 1:
			           $("ename").value=eles[i].innerHTML;
			          break;
			          case 2:
			           $("job").value=eles[i].innerHTML;
			          break;
			          case 3:
			           $("hiredate").value=eles[i].innerHTML;
			          break;
			          case 4:
			           $("mgr").value=eles[i].innerHTML;
			          break;
			          case 5:
			           $("sal").value=eles[i].innerHTML;
			          break;
			          case 6:
			           $("comm").value=eles[i].innerHTML;
			          break;
			          case 7:
			          var deptno = eles[i].innerHTML;
			  
			             //获取xhr对象
						var xhr = getXhr();
						//封装请求信息
						xhr.open("get", "./listDept.do", true);
						//发送请求
						xhr.send();
						//根据服务器端传递xhr.readyState触发的事件进行处理
						xhr.onreadystatechange = function() {
							//根据readyState是否处理完毕,status服务是否返回成功
							if (xhr.readyState == 4 && xhr.status == 200) {
								//获得xml的document对象
								var doc = xhr.responseXML;
								listDepts(doc,deptno);
							}
						}
			          
			          break;
			        }
			     }
			  }
			}
					
			emptr.appendChild(dutd);
			listemps.appendChild(emptr);
		}

	}

}

function updateEmp(){
   //获取xhr对象
	var xhr = getXhr();
	//封装请求信息
	xhr.open("post", "./updateEmp.do", true);
	var empno = $("eno").value;
	var ename = $("ename").value;
	var mgr = $("mgr").value;
	var hiredate = $("hiredate").value;
	var job = $("job").value;
	var sal = $("sal").value;
	var comm = $("comm").value;
	var deptno = $("deptno").value;
	var params = "empno=" + empno + "&ename=" + ename + "&mgr=" + mgr
			+ "&hiredate=" + hiredate + "&job=" + job + "&sal=" + sal
			+ "&comm=" + comm + "&deptno=" + deptno;
	//发送请求
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(params);
	xhr.onreadystatechange = function() {
		//根据readyState是否处理完毕,status服务是否返回成功
		if (xhr.readyState == 4 && xhr.status == 200) {
			//获得xml的document对象
			var doc = xhr.responseXML;
			listEmps(doc);
		}
	}
}
</script>
	</head>

	<body>
		<h1>
			&nbsp;用户查询的请求
		</h1>
		<input type="button" value="查询所有用户" onclick="selectEmp()" />
		<input type="button" value="添加用户" onclick="addEmp()" />

		<div id="content">
			<table border="1px" cellpadding="0" cellspacing="0">
				<caption>
					员工信息表
				</caption>
				<thead>
					<tr>
						<th>
							编号
						</th>
						<th>
							姓名
						</th>
						<th>
							岗位
						</th>
						<th>
							入职时间
						</th>
						<th>
							领导
						</th>
						<th>
							薪水
						</th>
						<th>
							奖金
						</th>
						<th>
							部门
						</th>
						<th>
						  操作
						</th>
					</tr>
				</thead>
				<tbody id="listemps">

				</tbody>
			</table>
		</div>
		<br />
		<br />
		<br />
		<br />

		<div id="addemp">

			<span> 员工编号： <input type="text" name="empno" id="eno" /> <br />
				员工姓名：<input type="text" name="ename" id="ename" /> <br /> 岗位:<input
					type="text" name="job" id="job" /> <br /> 员工入职日期：<input type=text
					name="hiredate" id="hiredate" /> <input type="button" value="选择日期"
					onclick="showCalendar(this,document.all.hiredate)" /> </span>
			<br />
			<span> 领导:<input type="text" name="mgr" id="mgr" /> <br />
				薪水:<input type="text" name="sal" id="sal" />
				<br /> 奖金:<input type="text" name="comm" id="comm" /> <br /> 
				部门:<select name ="deptno" id="deptno">
				      <option value="10">请选择部门</option>
				    </select>
			 </span>
			<span id="iemp"> 
			<input type="button" value="添加" onclick="insertEmp()" />
			</span>
			<span id="upemp">
				<input type="button" value="修改" onclick="updateEmp()" />
			</span>

		</div>

	</body>
</html>

nction $(id) {
	return document.getElementById(id);
}

function getXhr() {
	var xhr
	try {
		xhr = new XMLHttpRequest();
	} catch (err) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (er) {
			alert("不支持ajax技术");
		}
	}
	
	return xhr;
}

分享到：