怎么实现在jsp中一次性编辑和添加多条记录
日期：2014-05-18 浏览次数：20735 次
如何实现在jsp中一次性编辑和添加多条记录
最近做了一个东西，原来是在jsp中显示多条记录，同时jsp中有〔修改〕、〔添加〕、〔保存〕，当点击添加或修改时弹出一个页面，填写信息，然后保存。
现在想更为在显示记录的界面中完成修改和添加，当点击修改时候，就直接修改该条记录，当点击添加时就在最后一条下面加上一个空的记录，然后填上我需要的数据，点击保存以后保存到数据库中。
有这两天看了一些资料，ajax和数据岛技术都能实现该项功能，但是不知道从哪方面下手，请大家给指点一下！
------解决方案--------------------
給你個ajax例子吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> Employee List </title>
<script type= "text/javascript ">
var xmlHttp;
var name;
var title;
var department;
var deleteID;
var EMP_PREFIX = "emp- ";
function updateAll(ss){
document.getElementById( "name ").value=ss.getElementsByTagName( "td ")[1].firstChild.nodeValue;
document.getElementById( "title ").value=ss.getElementsByTagName( "td ")[2].firstChild.nodeValue;
document.getElementById( "dept ").value=ss.getElementsByTagName( "td ")[3].firstChild.nodeValue;
}
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 = "http://127.0.0.1:8080/dboperation/doAjax.jsp? "
+ createAddQueryString(name, title, department, "add ")
+ "&ts= " + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleAddStateChange;
xmlHttp.open( "GET ", url, true);
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 = "http://127.0.0.1:8080/dboperation/doAjax.jsp? "
+ "action=delete "
+ "&id= " + id
+ "&ts= &qu
最近做了一个东西，原来是在jsp中显示多条记录，同时jsp中有〔修改〕、〔添加〕、〔保存〕，当点击添加或修改时弹出一个页面，填写信息，然后保存。
现在想更为在显示记录的界面中完成修改和添加，当点击修改时候，就直接修改该条记录，当点击添加时就在最后一条下面加上一个空的记录，然后填上我需要的数据，点击保存以后保存到数据库中。
有这两天看了一些资料，ajax和数据岛技术都能实现该项功能，但是不知道从哪方面下手，请大家给指点一下！
------解决方案--------------------
給你個ajax例子吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> Employee List </title>
<script type= "text/javascript ">
var xmlHttp;
var name;
var title;
var department;
var deleteID;
var EMP_PREFIX = "emp- ";
function updateAll(ss){
document.getElementById( "name ").value=ss.getElementsByTagName( "td ")[1].firstChild.nodeValue;
document.getElementById( "title ").value=ss.getElementsByTagName( "td ")[2].firstChild.nodeValue;
document.getElementById( "dept ").value=ss.getElementsByTagName( "td ")[3].firstChild.nodeValue;
}
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 = "http://127.0.0.1:8080/dboperation/doAjax.jsp? "
+ createAddQueryString(name, title, department, "add ")
+ "&ts= " + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleAddStateChange;
xmlHttp.open( "GET ", url, true);
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 = "http://127.0.0.1:8080/dboperation/doAjax.jsp? "
+ "action=delete "
+ "&id= " + id
+ "&ts= &qu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
