ajax实现增删改查的一个实例
2013-03-11 08:10
330 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Common/Common.js" type="text/javascript"></script>
<style type="text/css">
#tbList
{
border-left:1px solid #0088F7;
border-top:1px solid #0088F7;
font-size:30px;
}
#tbList tr td
{
border-right:1px solid #0088F7;
border-bottom:1px solid #0088F7;
}
</style>
<script type="text/javascript">
var cId = -1;
window.onload = function () {
GetPageList(1);
gel("btnCancel").onclick = hidePannel;
gel("btnConfirm").onclick = doModify;
}
function GetPageList(pi) {
var xhr = new XMLHttpRequest();
xhr.open("get", "AjaxList.ashx?do=l&pi="+pi, true);
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var text = xhr.responseText;
var jason = eval("(" + text + ")");
var tbList = gel("tbList");
for (i = 0; i < jason.length; i++) {
var row = tbList.insertRow(-1);
var col1 = row.insertCell(-1);
col1.innerHTML = jason[i].CID;
var col2 = row.insertCell(-1);
col2.innerHTML = jason[i].CName;
var col3 = row.insertCell(-1);
col3.innerHTML = jason[i].CCount;
var col4 = row.insertCell(-1);
var c = jason[i].CImg;
col4.innerHTML = "<img src='./Upload/" + jason[i].CImg + "' width='100'/>";
// "<img src='Upload/" + jason[i].CImg + "' width='100px' />";
var col5 = row.insertCell(-1);
col5.innerHTML = "<a href='javascript:doDel(" + jason[i].CID + ")'>删</a> <a href='javascript:showPanel(" + jason[i].CID + ")'>改</a>";
}
}
}
}
xhr.send(null);
}
//获得班级信息显示到div中
function showPanel(id) {
gel("operPannel").style.display = "block";
cId = id;
//在div中显示班级名称和人数
var tbList = gel("tbList");
for (i = 0; i < tbList.rows.length; i++) {
if (tbList.rows[i].childNodes[0].innerHTML == id) {
gel("txtName").value = tbList.rows[i].childNodes[1].innerHTML;
gel("txtCount").value = tbList.rows[i].childNodes[2].innerHTML;
break;
}
}
}
function doDel(id) {
if (confirm("确定要删除吗？")) {
var xhr = new XMLHttpRequest();
xhr.open("get", "AjaxList.ashx?do=d&id=" + id, true);
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
switch (str) {
case "yes":
alert("删除成功！");
break;
case "no":
alert("删除失败！");
break;
case "error":
alert("参数错误！" + str);
break;
default:
alert("未知的错误！");
}
}
}
}
xhr.send(null);
}
window.location = "AjaxList.htm";
}
function doModify() {
var xhr = new XMLHttpRequest();
xhr.open("Post", "AjaxList.ashx", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
switch (str) {
case "yes":
//更新成功,修改html中的内容
alert("更新成功！");
var tbList = gel("tbList");
for (i = 0; i < tbList.rows.length; i++) {
if (tbList.rows[i].childNodes[0].innerHTML == cId) {
tbList.rows[i].childNodes[1].innerHTML = gel("txtName").value;
tbList.rows[i].childNodes[2].innerHTML = gel("txtCount").value;
}
}
break;
case "no":
alert("更新失败！");
break;
case "error":
alert("参数出现错误");
break;
default:
alert("未知的错误！");
}
hidePannel();
}
}
}
var str ="do=m&cId=" + cId + "&cName=" +encodeURI(gel("txtName").value) + "&cCount=" +encodeURI( gel("txtCount").value);
xhr.send(str);
}
//隐藏div
function hidePannel() {
gel("operPannel").style.display = "none";
}
</script>
</head>
<body>
<center>
<table id="tbList" cellspacing="0">
<tr>
<td>
ID
</td>
<td>
名称
</td>
<td>
人数
</td>
<td>
图片
</td>
<td>
操作
</td>
</tr>
</table>
<br />
<br />
<div id="operPannel" style="display:none">
名称:<input type="text" id="txtName"/><br />
人数:<input type="text" id="txtCount" /><br />
<input type="button" value="确定" id="btnConfirm" /> <input type="button" value="取消" id="btnCancel" />
</div>
</center>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Common/Common.js" type="text/javascript"></script>
<style type="text/css">
#tbList
{
border-left:1px solid #0088F7;
border-top:1px solid #0088F7;
font-size:30px;
}
#tbList tr td
{
border-right:1px solid #0088F7;
border-bottom:1px solid #0088F7;
}
</style>
<script type="text/javascript">
var cId = -1;
window.onload = function () {
GetPageList(1);
gel("btnCancel").onclick = hidePannel;
gel("btnConfirm").onclick = doModify;
}
function GetPageList(pi) {
var xhr = new XMLHttpRequest();
xhr.open("get", "AjaxList.ashx?do=l&pi="+pi, true);
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var text = xhr.responseText;
var jason = eval("(" + text + ")");
var tbList = gel("tbList");
for (i = 0; i < jason.length; i++) {
var row = tbList.insertRow(-1);
var col1 = row.insertCell(-1);
col1.innerHTML = jason[i].CID;
var col2 = row.insertCell(-1);
col2.innerHTML = jason[i].CName;
var col3 = row.insertCell(-1);
col3.innerHTML = jason[i].CCount;
var col4 = row.insertCell(-1);
var c = jason[i].CImg;
col4.innerHTML = "<img src='./Upload/" + jason[i].CImg + "' width='100'/>";
// "<img src='Upload/" + jason[i].CImg + "' width='100px' />";
var col5 = row.insertCell(-1);
col5.innerHTML = "<a href='javascript:doDel(" + jason[i].CID + ")'>删</a> <a href='javascript:showPanel(" + jason[i].CID + ")'>改</a>";
}
}
}
}
xhr.send(null);
}
//获得班级信息显示到div中
function showPanel(id) {
gel("operPannel").style.display = "block";
cId = id;
//在div中显示班级名称和人数
var tbList = gel("tbList");
for (i = 0; i < tbList.rows.length; i++) {
if (tbList.rows[i].childNodes[0].innerHTML == id) {
gel("txtName").value = tbList.rows[i].childNodes[1].innerHTML;
gel("txtCount").value = tbList.rows[i].childNodes[2].innerHTML;
break;
}
}
}
function doDel(id) {
if (confirm("确定要删除吗？")) {
var xhr = new XMLHttpRequest();
xhr.open("get", "AjaxList.ashx?do=d&id=" + id, true);
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
switch (str) {
case "yes":
alert("删除成功！");
break;
case "no":
alert("删除失败！");
break;
case "error":
alert("参数错误！" + str);
break;
default:
alert("未知的错误！");
}
}
}
}
xhr.send(null);
}
window.location = "AjaxList.htm";
}
function doModify() {
var xhr = new XMLHttpRequest();
xhr.open("Post", "AjaxList.ashx", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
switch (str) {
case "yes":
//更新成功,修改html中的内容
alert("更新成功！");
var tbList = gel("tbList");
for (i = 0; i < tbList.rows.length; i++) {
if (tbList.rows[i].childNodes[0].innerHTML == cId) {
tbList.rows[i].childNodes[1].innerHTML = gel("txtName").value;
tbList.rows[i].childNodes[2].innerHTML = gel("txtCount").value;
}
}
break;
case "no":
alert("更新失败！");
break;
case "error":
alert("参数出现错误");
break;
default:
alert("未知的错误！");
}
hidePannel();
}
}
}
var str ="do=m&cId=" + cId + "&cName=" +encodeURI(gel("txtName").value) + "&cCount=" +encodeURI( gel("txtCount").value);
xhr.send(str);
}
//隐藏div
function hidePannel() {
gel("operPannel").style.display = "none";
}
</script>
</head>
<body>
<center>
<table id="tbList" cellspacing="0">
<tr>
<td>
ID
</td>
<td>
名称
</td>
<td>
人数
</td>
<td>
图片
</td>
<td>
操作
</td>
</tr>
</table>
<br />
<br />
<div id="operPannel" style="display:none">
名称:<input type="text" id="txtName"/><br />
人数:<input type="text" id="txtCount" /><br />
<input type="button" value="确定" id="btnConfirm" /> <input type="button" value="取消" id="btnCancel" />
</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX面试题：一个页面实现增删改查(ASP.NET实现)
- AJAX面试题：一个页面实现增删改查(ASP.NET实现)
- 基于ajax的三层，实现数据库增删改查基础（三 UI层）
- JDBC实现数据库的增删改查操作实例
- 一个使用Pro*C实现增删改查的小例子
- tapestry中实现ajax的增删改查实例
- 一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子
- Ajax技术之与服务器通信-一个完整的实例(实现检测用户名是否唯一功能)
- 一个使用Pro*C实现增删改查的小例子
- nodejs操作mysql实现增删改查的实例
- 一个使用Pro*C实现增删改查的小例子
- 在struts1中使用DispatchAction对应多个ActionForm，实现写一个Action实现增删改查操作---一个Action处理多个操作的能力
- 19、SSM框架-Mybatis入门概述及第一个Mybatis实例实现增删改查（1）
- SpringMVC+Hibernate+Maven+MySQL实现增删改查的一个小Demo
- 一个使用Pro*C实现增删改查的小例子
- vue+element-ui+ajax实现一个表格的实例
- 分享一个php ajax实现文章顶/踩 实例
- 基于ajax的三层，实现数据库增删改查基础（五 前端界面其他功能的实现）
- SSM搭建-Mybatis入门概述及第一个Mybatis实例实现增删改查（16）
- hibernate通过session实现增删改查操作实例解析