`
zpx138332
  • 浏览: 46147 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类

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 class="asc" 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 望能提一下
分享到:
评论

相关推荐

    Springmvc+maven+ajax+jquery+json+mybatis登录增删改查详细注释

    Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用MyEclipse 10运行出来.并且付有sql脚本.可直接导入运行.并且经本人...

    Servlet+jsp+AJax的分页及增删改查

    在本文中,我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查(CRUD)功能以及分页。Servlet是Java Web应用程序的一部分,用于处理客户端请求和响应。JSP则是一种动态网页技术,它允许在服务器端...

    mvc+ef+api实现增删改查

    在IT行业中,开发Web应用程序时,常常会使用到多种技术和框架来实现数据的增删改查(CRUD)操作。本项目"mvc+ef+api实现增删改查"就是一个典型的例子,它结合了Microsoft的ASP.NET MVC、Entity Framework(EF)以及...

    c3p0+dbUtils+Ajax+Json+Jquery实现【增删改查】Demo

    在本项目"C3P0+DBUtils+Ajax+Json+Jquery实现【增删改查】Demo"中,我们将探讨如何结合这些技术来构建一个功能完善的Web应用,用于执行基本的数据操作,即增(Add)、删(Delete)、改(Modify)和查(Query)。...

    struts2+ajax+easyui+json+datagrid增删改查

    它可以动态加载数据,支持Ajax请求获取服务器上的数据,实现增删改查功能。DataGrid还提供了分页功能,用户可以通过选择页码或输入页码来查看不同页的数据。同时,它支持对列进行排序,只需点击表头,数据就会根据所...

    js实现Ajax效果的增删改查

    在这个“js实现Ajax效果的增删改查”主题中,我们将深入探讨如何利用JavaScript和Ajax技术来实现数据库数据的CRUD(创建、读取、更新和删除)操作。 首先,我们需要理解Ajax的工作原理。Ajax通过创建XMLHttpRequest...

    php+mysql+bootstrap+jquery实现增删查改的前后端

    通过SQL语句,你可以执行CRUD操作,与PHP进行交互,实现数据的增删改查。 **Bootstrap**: Bootstrap是一个流行的前端开发框架,提供了丰富的CSS样式和JavaScript组件,可以快速构建响应式和移动优先的网页。在本...

    一个页面实现Ajax效果的增删改查-JQuery+Json版.zip

    本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版.zip"正是展示了如何利用jQuery库和JSON数据格式在单一页面上实现动态的数据操作,包括添加、删除、修改和查询功能。 首先,jQuery是一个轻量级的JavaScript库...

    一个页面实现Ajax效果的增删改查-JQuery+Json版

    本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版"正是利用了这一技术,结合jQuery库和JSON数据格式,为用户提供了一个在一个页面上完成数据增、删、改、查功能的示例。 **jQuery** 是一个轻量级的JavaScript...

    一个简单的JSON+AJAX

    在Web开发中,JSON与AJAX(Asynchronous JavaScript and XML)常常结合使用,实现网页的异步更新,提升用户体验。 AJAX允许Web应用程序在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这种...

    Servlet+ajax+CURD实现增删改查功能程序

    此“Servlet+ajax+CURD实现增删改查功能程序”是一个典型的示例,展示了如何利用这些技术来实现数据的CRUD(Create、Read、Update、Delete)操作。 Servlet是Java服务器端编程的一种方式,它扩展了HTTP服务器的功能...

    SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码以及校验并且赋有详细注释,以及增删改查功能

    注:此项目是用IntelliJ IDEA 13.1.3此软件编写而成,不过和myeclipse都差不多,本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码,...以及校验并且赋有详细注释,以及增删改查功能

    Ajax实现增删改查的demo

    在本"Ajax实现增删改查的demo"中,我们将探讨如何利用Ajax技术来实现数据库数据的基本操作:增加(Add)、删除(Delete)、修改(Update)和查询(Query)。 **一、Ajax的基础原理** 1. **创建XMLHttpRequest对象*...

    异步刷新返回json数据的增删改查

    本文将深入探讨“异步刷新返回JSON数据的增删改查”这一主题,以及如何利用AJAX技术实现这些操作。 首先,我们需要理解什么是AJAX(Asynchronous JavaScript and XML)。AJAX并非一种单一的技术,而是一种使用现有...

    html+Servlet+ajax实现登录修改

    在IT领域,构建Web应用程序是常见的任务之一,而"html+Servlet+ajax实现登录修改"是一种常见的技术组合,用于创建动态、交互式的用户界面。在这个项目中,我们使用HTML作为前端展示层,Servlet作为服务器端处理逻辑...

    EXTJS4+STRUTS2+JAVA增删改查

    在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中,我们将深入探讨这三个技术如何协同工作,实现数据的动态管理。 EXTJS4是一个强大的JavaScript库,主要用于创建桌面级的Web应用程序。它提供了丰富的组件库,如表格、...

    基于Javaweb中用Ajax做的增删改查

    在本项目中,需要编写SQL语句来执行增删改查操作。例如,`INSERT INTO`, `DELETE FROM`, `UPDATE`, `SELECT`等。 5. **JDBC连接**: Java通过Java Database Connectivity (JDBC) API与SQL Server建立连接。需要...

    SSH三大框架整合+ajax应用+jquery+json应用+分页+增删改查

    通过这个项目,开发者可以学习如何配置SSH框架,编写Action类,设置Action Mapping,使用Hibernate进行数据操作,以及如何在页面上利用Ajax和jQuery展示和处理JSON数据,同时实现分页和基本的CRUD功能。

    Jquery Ajax动态增删改查

    而jQuery库简化了JavaScript的使用,包括对AJAX的操作,使得开发者能够更加便捷地实现动态增删改查功能。 一、jQuery AJAX的基本用法 1. `$.ajax()`: 这是jQuery提供的核心AJAX函数,它接受一个包含各种选项的对象...

Global site tag (gtag.js) - Google Analytics