本实例根据文本框入力的值,更新到表格行上。通过表格上的删除按钮可以删除该行记录
文件一览
- employeeList.html
- EmployeeListServlet
employeeList.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp;
var name;
var title;
var department;
var deleteID;
var EMP_PREFIX = "emp-";
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function addEmployee() {
name = document.getElementById("name").value;
title = document.getElementById("title").value;
department = document.getElementById("dept").value;
action = "add";
if (name == "" || title == "" || department == "") {
return;
}
var url = "EmployeeListServlet?" + createAddQueryString(name,title,department,"add")
+ "&ts=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = handleAddStateChange;
xmlHttp.send(null);
}
function createAddQueryString(name,title,department,action) {
var queryString = "name" + name
+ "&title=" + title
+ "&department=" + department
+ "&action=" + action;
return queryString;
}
function handleAddStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
updateEmployeeList();
clearInputBoxes();
} else {
alert("Error While adding employee.");
}
}
}
function clearInputBoxes() {
document.getElementById("name").value = "";
document.getElementById("title").value = "";
document.getElementById("dept").value = "";
}
function deleteEmployee(id) {
deleteID = id;
var url = "EmployeeListServlet?" + "action=delete" + "&id=" + id + "&ts=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = handleDeleteStateChange;
xmlHttp.send(null);
}
function updateEmployeeList() {
var responseXML = xmlHttp.responseXML;
var status = responseXML.getElementsByTagName("status").item(0).firstChild.nodeValue;
status = parseInt(status);
if (status != 1) {
return;
}
var row = document.createElement("tr");
var uniqueId = responseXML.getElementsByTagName("uniqueId")[0].firstChild.nodeValue;
row.setAttribute("id",EMP_PREFIX+uniqueId);
row.appendChild(createCellWithText(name));
row.appendChild(createCellWithText(title));
row.appendChild(createCellWithText(department));
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","Delete");
deleteButton.onclick=function() {deleteEmployee(uniqueId);};
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("employeeList").appendChild(row);
updateEmployeeListVisibility();
}
function createCellWithText(text) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(text));
return cell;
}
function handleDeleteStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
deleteEmployeeFromList();
} else {
alert("Error while deleting employee");
}
}
}
function deleteEmployeeFromList() {
var status = xmlHttp.responseXML.getElementsByTagName("status").item(0).firstChild.nodeValue;
status = parseInt(status);
if (status != 1) {
return;
}
var rowToDelete = document.getElementById(EMP_PREFIX + deleteID);
var employeeList = document.getElementById("employeeList");
employeeList.removeChild(rowToDelete);
updateEmployeeListVisibility();
}
function updateEmployeeListVisibility() {
var employeeList = document.getElementById("employeeList");
if(employeeList.childNodes.length > 0) {
document.getElementById("employeeListSpan").style.display = "";
} else {
document.getElementById("employeeListSpan").style.display = "none";
}
}
</script>
</head>
<body>
<h1>Employee List</h1>
<form action="#">
<table width="80%" border="0">
<tr>
<td>Name: <input type="text" id="name" /></td>
<td>Title: <input type="text" id="title" /></td>
<td>Department: <input type="text" id="dept" /></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Add" onclick="addEmployee();" />
</td>
</tr>
</table>
</form>
<span id="employeeListSpan" style="display:none"></span>
<h2>Employees:</h2>
<table border="1" width="80%">
<tbody id="employeeList"></tbody>
</table>
</body>
</html>
EmployeeListServlet
package ajaxbook.chap4;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class EmployeeListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String action = req.getParameter("action");
if ("add".equals(action)) {
addEmployee(req,resp);
} else if ("delete".equals(action)) {
deleteEmployee(req,resp);
}
}
protected void addEmployee(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//Store the object in the database
String uniqueID = storeEmployee();
StringBuffer xml = new StringBuffer("<result><uniqueId>");
xml.append(uniqueID);
xml.append("</uniqueId>");
xml.append("<status>1</status>");
xml.append("</result>");
sendResponse(resp,xml.toString());
}
protected void deleteEmployee(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String uniqueID = req.getParameter("id");
StringBuffer xml = new StringBuffer("<result><uniqueId>");
xml.append(uniqueID);
xml.append("</uniqueId>");
xml.append("<status>1</status>");
xml.append("</result>");
sendResponse(resp,xml.toString());
}
private String storeEmployee() {
String uniqueId = "";
Random randmier = new Random(System.currentTimeMillis());
for (int i = 0; i < 8; i++) {
uniqueId += randmier.nextInt(9);
}
return uniqueId;
}
private void sendResponse(HttpServletResponse resp, String responseText)
throws ServletException, IOException {
resp.setContentType("text/xml");
resp.getWriter().write(responseText);
}
}
运行效果参照附件内容
- 大小: 33.8 KB
分享到:
相关推荐
Echarts + Web实现大屏展示效果,实现数据可视化,大屏显示效果,用echarts插件实现,视觉体验,画面惊人,数据效果展示必备神器!
1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 4 1.2.5国内外应用现状 6 1.2.6 研究现状总结 7 1.3研究目标与内容 7 1.3.1多窗口浏览器模式的实现机制 7 1.3.2跨域交互即缓存处理方法...
4、OLE对象 OLE对象包括外部应用程序的信息,比如:文本、电子表格、图表等,对象所表示的 信息可以设置成动态更新。OLE对象的加入方式可以选择链接和嵌入两种方式。ActiveX 控件是一种可重用组件,他支持广泛的...
每一个观看白板的用户,画面都会实时动态更新。 如果还有时间添加更多工具,例如选择笔的颜色和不同的笔尺寸。 白板管理员可以选择其他客户端是否可以编辑白板。 还应实现保存白板的功能。技术要求: 对于服务器端...
10. 应用不提示自动更新 11. 一直处于加载状态 12. 待审核的帖子依旧显示问题 13. 加密相册访问限制问题 14. 设置权限后未生效的问题 15. 个人头像上传无法替换问题 16. 部分手机适配问题
iShow是一套基于P2P技术的在线视频直播系统,iShow依存于web网页,无需下载插件,可实现低延时高清的视频语音直播体验。现已广泛应用于教育、娱乐、客服等各个行业,随着国内带宽的提升和各类新技术的加入,视频直播...
是一个Flash动画播放软件,可以播放扩展名为EXE和SWF的Flash动画,并且可以将SWF格式的动画文件 转换屏保文件、转换成动态桌面、抓取播放中的任意动画画面并设置为当前桌面墙纸,Flash动画中精彩的各种动画场景将使你...
iShow是一套基于P2P技术的在线视频直播系统,iShow依存于web网页,无需下载插件,可实现低延时高清的视频语音直播体验。现已广泛应用于教育、娱乐、客服等各个行业,随着国内带宽的提升和各类新技术的加入,视频直播...
SnagIt四种图像捕捉模式(图像模式、文本模式、视频模式、Web模式),满足任何情况下的屏幕截图,支持自动定时捕捉功能。简单预置屏幕捕捉方案及输出方案并加上一些前期效果,如标题、边框、边缘效果、水印、各种...
在第二个自检画面的最下方还会出现一行关于主板的信息,前面的日期显示的是当前主板的BIOS更新日期,后面的符号则是该主板所采用的代码,根据代码我们可以了解主板的芯片组型号和生产厂商。以往老主板的自检画面中...
SnagIt四种图像捕捉模式(图像模式、文本模式、视频模式、Web模式),满足任何情况下的屏幕截图,支持自动定时捕捉功能。简单预置屏幕捕捉方案及输出方案并加上一些前期效果,如标题、边框、边缘效果、水印、各种...
InkMap 是一种将艺术家和艺术融合到一个领域的 Web 应用程序。 首次访问我们的应用程序时,用户将看到一个漂亮的启动画面。 一旦点击进入搜索页面,用户就会看到一个默认搜索来显示纹身图像,以及当地纹身店的地址...
用Java实现的HotJava浏览器(支持Java applet)显示了Java的魅力:跨平台、动态Web、Internet计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器均支持Javaapplet。另一方面,Java技术也不断更新。Java...
3) 组态开发 A 组态开发管理提供的是一体化集成的系统开发平台,组态开发管理平台能够提供良好的 远程运维功能,支持分布式网络节点下的工程开发和部署,对工程能够远程更新。 B 管理工具按照分布式系统统一管理...
iShow是一套基于P2P技术的在线视频直播系统,iShow依存于web网页,无需下载插件,可实现低延时高清的视频语音直播体验。现已广泛应用于教育、娱乐、客服等各个行业,随着国内带宽的提升和各类新技术的加入,视频直播...
6 制作欢迎画面 9. 7 一个简单的编辑器 9. 8 Swing的Drag和Drop 第10章 Java图形 10. 1 一个圆形的按钮 10. 2 捕捉屏幕 10. 3 缩放图片 10. 4 2D图形 10. 5 3D图形.. 10. 6 一...
开机画面现在有两种,一种为AMI公司开发的,一种为Phoenix-award两家公司合并共同开发的;下面这张图为Phoenix-award开机自画面: Phoenix-award workstation BIOS V6.00PC,An Energy star Ally copyright(c) 1984...