<%@ 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>
用户查询的请求
</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;
}
