加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ajax实现增删改查的一个实例

发布时间:2020-12-15 22:09:03 所属栏目:百科 来源:网络整理
导读:!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"/scr

<!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,"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" />&nbsp&nbsp&nbsp&nbsp<input type="button" value="取消" id="btnCancel" />
</div>
</center>

</body> </html>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读