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

#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;

}

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 = "";

// "";

var col5 = row.insertCell(-1);

col5.innerHTML = "删 改";

}

}

}

}

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";

}

ID

名称

人数

图片

操作

名称:

人数:

&nbsp&nbsp&nbsp&nbsp