<%@ 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做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用MyEclipse 10运行出来.并且付有sql脚本.可直接导入运行.并且经本人...
在本文中，我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查（CRUD）功能以及分页。Servlet是Java Web应用程序的一部分，用于处理客户端请求和响应。JSP则是一种动态网页技术，它允许在服务器端...
在IT行业中，开发Web应用程序时，常常会使用到多种技术和框架来实现数据的增删改查（CRUD）操作。本项目"mvc+ef+api实现增删改查"就是一个典型的例子，它结合了Microsoft的ASP.NET MVC、Entity Framework（EF）以及...
在本项目"C3P0+DBUtils+Ajax+Json+Jquery实现【增删改查】Demo"中，我们将探讨如何结合这些技术来构建一个功能完善的Web应用，用于执行基本的数据操作，即增（Add）、删（Delete）、改（Modify）和查（Query）。...
它可以动态加载数据，支持Ajax请求获取服务器上的数据，实现增删改查功能。DataGrid还提供了分页功能，用户可以通过选择页码或输入页码来查看不同页的数据。同时，它支持对列进行排序，只需点击表头，数据就会根据所...
在这个“js实现Ajax效果的增删改查”主题中，我们将深入探讨如何利用JavaScript和Ajax技术来实现数据库数据的CRUD（创建、读取、更新和删除）操作。 首先，我们需要理解Ajax的工作原理。Ajax通过创建XMLHttpRequest...
通过SQL语句，你可以执行CRUD操作，与PHP进行交互，实现数据的增删改查。 **Bootstrap**： Bootstrap是一个流行的前端开发框架，提供了丰富的CSS样式和JavaScript组件，可以快速构建响应式和移动优先的网页。在本...
本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版.zip"正是展示了如何利用jQuery库和JSON数据格式在单一页面上实现动态的数据操作，包括添加、删除、修改和查询功能。 首先，jQuery是一个轻量级的JavaScript库...
本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版"正是利用了这一技术，结合jQuery库和JSON数据格式，为用户提供了一个在一个页面上完成数据增、删、改、查功能的示例。 **jQuery** 是一个轻量级的JavaScript...
在Web开发中，JSON与AJAX（Asynchronous JavaScript and XML）常常结合使用，实现网页的异步更新，提升用户体验。 AJAX允许Web应用程序在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种...
此“Servlet+ajax+CURD实现增删改查功能程序”是一个典型的示例，展示了如何利用这些技术来实现数据的CRUD（Create、Read、Update、Delete）操作。 Servlet是Java服务器端编程的一种方式，它扩展了HTTP服务器的功能...
注：此项目是用IntelliJ IDEA 13.1.3此软件编写而成，不过和myeclipse都差不多，本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录，注册，修改密码，...以及校验并且赋有详细注释，以及增删改查功能
在本"Ajax实现增删改查的demo"中，我们将探讨如何利用Ajax技术来实现数据库数据的基本操作：增加（Add）、删除（Delete）、修改（Update）和查询（Query）。 **一、Ajax的基础原理** 1. **创建XMLHttpRequest对象*...
本文将深入探讨“异步刷新返回JSON数据的增删改查”这一主题，以及如何利用AJAX技术实现这些操作。 首先，我们需要理解什么是AJAX（Asynchronous JavaScript and XML）。AJAX并非一种单一的技术，而是一种使用现有...
在IT领域，构建Web应用程序是常见的任务之一，而"html+Servlet+ajax实现登录修改"是一种常见的技术组合，用于创建动态、交互式的用户界面。在这个项目中，我们使用HTML作为前端展示层，Servlet作为服务器端处理逻辑...
在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中，我们将深入探讨这三个技术如何协同工作，实现数据的动态管理。 EXTJS4是一个强大的JavaScript库，主要用于创建桌面级的Web应用程序。它提供了丰富的组件库，如表格、...
在本项目中，需要编写SQL语句来执行增删改查操作。例如，`INSERT INTO`, `DELETE FROM`, `UPDATE`, `SELECT`等。 5. **JDBC连接**： Java通过Java Database Connectivity (JDBC) API与SQL Server建立连接。需要...
通过这个项目，开发者可以学习如何配置SSH框架，编写Action类，设置Action Mapping，使用Hibernate进行数据操作，以及如何在页面上利用Ajax和jQuery展示和处理JSON数据，同时实现分页和基本的CRUD功能。
而jQuery库简化了JavaScript的使用，包括对AJAX的操作，使得开发者能够更加便捷地实现动态增删改查功能。 一、jQuery AJAX的基本用法 1. `$.ajax()`: 这是jQuery提供的核心AJAX函数，它接受一个包含各种选项的对象...