Ajax添加数据与删除篇实现代码

2019-09-14 07:16:42刘景俊

ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
if(ajax.readyState == 4){//数据返回成功
if(ajax.status == 200){//http请求状态码返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的数据,并保存在xmlData变量里
var list = xmlData.getElementsByTagName("list");//在返回的数据里,获取所有list标签
if(list.length!=0){
var t = document.getElementById("a");//获取展示数据的表格
while(t.rows.length!=0){ //在读取数据时如果表格已存行.一律删除
t.removeChild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertRow(t.rows.length);//有几个list就为表格增加几行.
tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);
tr.onclick = function(e){add_Event(e)};
var td = tr.insertCell(0);
td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);//提交请求,参数为null
}

window.load = Read();

function add_Event(e){
e = e || window.event;
var elem = e.target || e.srcElement;
if(elem.tagName == "TD"){
elem = elem.parentNode;
}
var table = elem.parentNode;
for(var i=0;i<table.rows.length;i++){
table.rows[i].style.background="";
}
elem.style.background="#999ccc";
document.getElementById("hid_id").value = elem.id;
}

//删除数据函数
function del_Data(){
var mesage = document.getElementById("msg");//获取显示操作信息的span
mesage.innerHTML="正在删除请稍候......";
var table = document.getElementById("a");//获取要显示数据的表格
if(table.rows.length == 0){
mesage.innerHTML = "表格内没有数据可供删除!";
return;
}
var id = document.getElementById("hid_id");
if(id.value.length == 0){
mesage.innerHTML = "您还没有选择数据!";
return;
}
var ajax = ajax_xmlhttp();//定义xmlhttprequest对象
ajax.open("post","Add_Del_data.asp?action=del",true);//设置请求方式,请求文件,异步请求

var param = "id="+escape(id.value);//获取要删除数据的id

ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var xml = ajax.responseXML;
var msg = xml.getElementsByTagName("msg")[0].firstChild.nodeValue;
if(msg == 0){
mesage.innerHTML = "成功删除数据!";
var tr = document.getElementById(id.value);//获取当前选择的行
tr.parentNode.removeChild(tr);//引用该行的父元素.然后删除该行.
id.value="";//删除完成清空文本框里的值,
}
if(msg == 1){
mesage.innerHTML = "服务端发生错误,删除失败!";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send(param);
}

//提交数据函数
function add_Post(){
var msgaes = document.getElementById("msg");//用来显示提示信息
var str = document.getElementById("str");//接收输入的内容