ajax实现增删改查的一个实例
2018-07-20 来源：open-open
<!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>
标签： isp
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐