<%@ 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;
}
分享到：
相关推荐
Ajax实现增删改查的demo
用javascript来实现Ajax效果的增删改查
asp.net+ajax实现无刷新的增删改查
Jquery Ajax动态增删改查，Jquery Ajax
基于Javaweb中用Ajax做的一个小型增删改查，有连接到SQL Server数据库
ajax实现增删改查、分页、级联等功能源码 博文链接：https://yinghuayu1324117.iteye.com/blog/974614
AnjularJS配合Ajax实现的增删改查，框架使用SpringMVC+Mybatis，附带数据库，改个数据库信息就可以用
使用Servlet+Jsp+JDBC实现增删改查，前台显示界面使用JavaScript、Ajax与后台交互进行登录验证，并对查询结果实现分页、局部刷新，以及复选框(全选、反选)操作，适合Web开发的初学者
一个页面实现Ajax效果的增删改查-JQuery+Json版包含数据库
由EFCore配合WebApi搭建的简单框架，通过Ajax实现增删改查，显示部分用了AngularJS。压缩包中包含源码、数据库、搭建流程。
项目使用技术：EasyUI、Jquery、Ajax、Jsp、Servlet、JDBC连接Mysql数据库。 这么好的东西，怎么能不分享出去呢？大家觉得不错，请分享给你的朋友们。
好吧。这个功能完全是我自己写的 不想分享的 写这不容易的，...就是利用JQuery的Ajax,实现增删改查，后台用Struts2+HIbernate3框架，MySQL数据库。附带sql文件。绝对正常运行！！适合基础的朋友提示能力。欢迎下载。
ajax,jquery,json一个页面实现Ajax效果的增删改查-JQuery+Json版.zip
利用最简单易懂的方式写了一个完成的纯ajax的增删改查及分页，可以直接下载使用，方便学习，如果觉得不错，记得评论，您的评论是对我最大的支持。
使用mvc+ef+api实现了页面上的增删改查
Struts2 jQuery Ajax 单页面增删改查，附带Mysql数据脚本!
数据库部分：创建表、增删改查语句的书写等。 前端部分：HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化（添加私有...
配套视频可在腾讯课堂免费观看，尚硅谷ssm整合
主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
springboot+vue+element增删改查Demo 集成了： 1. restful接口定义 2. 增删改查定义，路径参数定义 3. 跨域处理 4. 参数校验 5. 异常拦截 6. swagger文档 7. 测试用例 8. logback...