OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

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

2022-2-5 17:00| 发布者: 菜鸟教程小白| 查看: 293| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: Hello 大家好！这个ajax系列教程讲到这里已经完成50%了．第4篇讲了ajax向数据库添加数据，第5篇讲了ajax修改数据库中的数据．今天我们来讲ajax添加数据与删除并存的实例效果． ...

如果你真的把前几篇掌握了．实现ajax删除功能会易如反常．我所要教你的是．灵活利用JavaScript和Dom来实现一个酷酷的删除效果．其实你学习到这里．已经能够明白，在ajax技术中那些被请求的服务端网页，在非ajax应用中并无太大区别．无非也是接受前端发过来的请求．在后台执行一些操作而已！学习完这篇教程以后．你会明白想要实现够炫够酷的的ajax效果．你必须要熟练掌握JavaScript Dom 这些技术精通．
刚刚我喝多了，上面的这段话是我在两天前就写好的．我本来想直接睡觉的．但我想试试．是不是在我喝酒之后，我能够讲的更好．
其实我觉得在我酒醉迷离的时候更能很好的将我的知识传授与你．今天的添加效果与前一篇的添加数据一样．但今天的删除效果或许是你从未看到过的．想要删除那条数据．请单击他．然后点击删除按扭．这跟桌面应用程序并无二样．ajax就是这样的神奇．不然他不会被全世界的Web开发人员所追求！还是先看实例吧．你会为此而感到惊讶的！

复制代码代码如下:

 
<html> 
<head> 
<title>ajax无刷新添加与删除数据</title> 
<style> 
body{ 
font-size:12px; 
} 
table{ 
border-collapse:collapse; 

} 
</style> 
</head> 
<body> 
为显示更流畅，我们只读取数据库内最新的10条数据．由于在线测试人数多．都在操作一个数据库．可能会出现并发情况！ 
<hr/> 
输入内容：<input id="str" type="input" /> <input type="button" value="确定添加" onclick="add_Post()"/> 
<span id="msg" style="color:red"></span> 
<table border="1"><!--该表格用来显示数据内容--> 
<tbody id="a"></tbody> 
</table> 
<span style="color:red">操作提示：请用鼠标单击你想要删除的数据．然后点击删除按扭！</span> 
<input id="hid_id" type="hidden" /> 
<input type="button" value="删除数据" onclick="del_Data()" /> 
<script type="text/javascript"> 
function ajax_xmlhttp(){ 
//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本 
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"); 
for(var i=0; i<msXmlhttp.length; i++){ 
try 
{ 
_xmlhttp=new ActiveXObject(msXmlhttp[i]); 
} 
catch(e) 
{ 
_xmlhttp=null; 
} 
} //循环创建基于IE浏览器的xmlhttp.结束 
//如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequest 
if(!_xmlhttp && typeof XMLHttpRequest != "undefined") 
{ 
_xmlhttp=new XMLHttpRequest(); 
} 
return _xmlhttp; 
} 

//读取数据函数 
function Read(){ 
var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量． 
ajax.open("post","Add_Del_Data.asp?action=read",true);//设置请求方式，请求的网页，url的action参数为read，异步请求 
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");//接收输入的内容 
if(str.value.length == 0){ 
msgaes.innerHTML = "不接受空内容！" 
return; 
} 
msgaes.innerHTML = "正在提交"; 
var ajax = ajax_xmlhttp();//定义xmlhttprequest对象 
ajax.open("post","Add_Del_data.asp?action=add",true);//设置请求方式，请求文件，异步请求 

var param = "str="+escape(str.value);//获取你输入的内容,注意这里的str,服务端将接收str中的值 
ajax.onreadystatechange = function(){ 
if(ajax.readyState==4){ 
if(ajax.status==200){ 
var msg = ajax.responseXML.getElementsByTagName("msg");//获取服务端返回的msg标签 
if(msg[0].firstChild.nodeValue == 0){ 
var max_num = ajax.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue; 

var t = document.getElementById("a"); 
var tr = t.insertRow(0); 
tr.setAttribute("id",max_num); 
tr.onclick = function(e){add_Event(e)}; 
var td = tr.insertCell(0); 
td.innerHTML = str.value; 
str.value = ""; 
msgaes.innerHTML = "添加完成"; 
} 
else if(msg[0].firstChild.nodeValue == 3){ 
msgaes.innerHTML = "不接受空的内容"; 
return; 
} 
else if(msg[0].firstChild.nodeValue == 1){ 
msgaes.innerHTML = "服务端发生错误，数据添加失败！"; 
return; 
} 
else{ 
msgaes.innerHTML = "该实例供学习使用．请不要恶意输入．谢谢！"; 
} 
} 
} 
} 
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服务端提交数据，必须设置该头．否则服务端会接收不到 
ajax.send(param);//注意send方法向服务端提交param变量中的内容． 
} 
</script> 
<a href="https://www.ogeek.net" target="_blank">极客世界+</a> 
</body> 
</html> 

怎么样效果是不是很酷？上面的文本框里是前台的html源码．我们先来讲一下我们在前端干了什么．从body标签开始讲起．

一段友情提示的文字．告诉你会出现些什么情况！
添加数据的文本框和按扭！用来向服务端数据库写入数据内容．
一个span标签．ID为msg，用来显示你当前操作的信息
一个表格．表格内有tbody元素，id为a．用来显示读取到的数据．你可以在表格内选择要删除的数据．
一个隐藏的输入框．当你选择数据时．会把该数据的id值放到输入框里．删除时引用这个值．提交给服务端
删除数据按扭．定义了一个onclick单击事件．del_Data()函数．向服务发送删除指令
下面进入script脚本部份．script里面有5个自定义函数．分别是：ajax_xmlhttp()，Read()，add_Event()，del_Data()，add_Post()．我们来一一讲解函数的作用．

1、ajax_xmlhttp();创建一个可用的XMLHTTPRequest对象，如果你还不知道什么是XMLHTTPRequest，请参阅：XMLHTTPRequest
2、Read();读取数据函数．前几篇教程中都有讲过ajax读取数据．我只讲今天读取过程中的重点，先看下服务端网页输出的xml．add_del_data.asp?action=read．从服务端传回的xml数据里获取所有的list标签以后．我们先使用getElementById方法获取到了存放数据的表格．然后循环遍历这些list 标签．每个list代表一条数据．每个list内包含着2个子元素．第１个子元素内存储着该条数据的id值，第２个子元素内存储着该条数据的文本内容．好，我们来看下Read()函数中for循环里的语句：
（１）：var tr = t.insertRow(t.rows.length);每循环一个list便为表格增加一行．因为表格的每一行显示一条数据．并返回对该行的引用．
（２）：tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);为新增的行设置一个id属性．并为该属性指定一个值．注意，这里是重点．list[i].childNodes[0].firstChild.nodeValue这句的意思是要获取每条数据中id字段的值．也就是该条数据的id值．我们将这个值写给tr的id属性．以方便我们用鼠标点击了某行以后来引用这个id．
（３）：tr.onclick=function(e){add_Event(e)};紧接着再为新增的行绑定一个自定义函数．函数的名称是add_Event();
（４）：var td.tr.insertCell(0);为新的增添加一列．并返回对该列的引用．
（５）：td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;在该列中写入第i个list的第2个子元素中的文本内容．也就是content字段里的内容了
我们把每条数据的id设定给表格中每一行的id属性．把每条数据中的content中的文本内容填写到每一行中的单元格内．至此整个数据的显示过程已完成！
　
3、add_Event(e);我们在Read函数内向表格的每一行绑定了该函数．并利用闭包技术向addEvent传递了事件对象．该函数的作用就是找出你单击的行．并获得该行数据的id：
（１）：e = e || window.event;标准化事件对象．FF等浏览器利用参数传递，IE可直接使用window.event．
（２）：var elem = e.target || e.srcElement; 请参阅：target或srcElement．标准化触发事件的元素．是那个元素触发了该事件．在这里的意思是说：你点击了表格中的那一行．但事实上我取到的是TD，而并非TR．这应该是传说中的事件捕获和冒泡所致．没关系我们使用tagName判断一下如果是TD，则取该TD的父元素．这下肯定是TR了吧．呵呵．
（３）：var table = elem.parentNode;取TR的父元素．就是那个tbody．并返回对tbody的引用．
（４）：使用一个for循环遍历tbody中所有的行．将每行的背景颜色设置为空．
（５）：elem.style.background="#999000";循环完毕以后．为你点击的这一行添加一个背景色．
（６）：document.getElementById("hid_id").value = elem.id;获取网页中那个隐藏的文本框．并将你点击的这一行的id写入到文本框内．该行的id属性值．正是你选取数据的id值．而且每点击一行．这个文本框里的值都会随着你点击的行而改变．而我们在提交删除的函数里正是引用的该文本框里的值．

4、del_Data();该函数的作用：把被删除的数据的ID提交给服务端请求的网页．然后根据服务端返回的一个msg标签．来判断数据是否被成功删除．老规矩我只讲以前没有涉及过的内容：
（１）：点击删除按扭启用del_Data()函数．我们先找出id为msg的span标签．然后写一段操作信息．告诉你正在删除数据．
（２）：获取要存放数据的表格．也就是那个id为a的tbody．判断tbody中是否有数据．如果tbody中没有任何数据．则告诉你没有数据可供选择．然后退出函数．不再往下执行．
（３）：获取那个隐藏的文本框．并判断文本框是否有值．如果为空显示一段提示信息．退出函数．不再执行！如果有值存在则证明你选择了某条数据．下面的ajax会将你选择的这条数据提交给服务端网页进行删除
（４）：关于ajax是如何提交和回收数据的．请参阅"ajax初试之读取数据篇"与"ajax读取数到表格"．
（５）：del_Data()重点是这里：判断服务端传回那个msg标签．如果该标签的内容为0，则代表服务端工作一切顺利，数据已被成功删除．
（６）：数据被成功删除以后：var tr = document.getElementById(id.value);获取当前选择的行．
（７）：tr.parentNode.removeChild(tr);//引用该行的父元素tbody，删除该行！
至此删除数据完成．其经过是接受服务端发回来的信号．如果删除成功，则删除前端选择的表格行．如果失败则给出提示信息！
5、add_Post();该函数与上一篇中基本一样．提交添加的数据给服务端．唯一不同的地方是：当数据被成功添加以后．我们又调用了Read();函数来读取新的数据．因为我们必须要获得新添加数据的正确id，以便我们可以正确删除！
好了，前端的代码已经讲解完了．
下面是本次ajax实例教程请求的服务端网页源码：

复制代码代码如下:

 
<!--#include file="Conn.Asp"--> 
<% 
'出自：http://Www.Web666.Net 
'作者：康董 
'如需转载请务必保留以上信息 
'定义一个变量，来保存xml数据 
xml="<?xml version='1.0' encoding='gb2312'?><body>" 
action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作 
Select case action 
case "read" '如果为read则执行读取数据的操作 
Call Read 
case "add" '如果为add则执行添加数据 
Call Add_Data 
case "del" '如果为del则执行删除数据的操作 
Call Del_Data 
case else 
xml = xml&"<msg>请求参数错误，请不要试图非法操作！</msg>" 
End Select 
xml=xml&"</body>" 
Response.Clear 
Response.ContentType="text/xml" 
Response.CharSet="gb2312" 
Response.write xml 
Response.End 


Sub Read '定义一个读取数据的过程 
Call OpenConn '打开数据库链接 
Sql = "Select top 10 * From del_table order by id desc" '打开数据库中名字为del_table的表 
Set Rs = Conn.Execute(Sql) '执行Sql语句，并将sql的索引赋值给rs变量 

While Not Rs.Eof '如果表中有数据．则一直循环读取 
xml = xml&"<list>" '每读取一条数据则创建一个list标签 
xml = xml&"<id>"&Rs("id")&"</id>" 'id字段内容 
xml = xml&"<content>"&Rs("content")&"</content>" 'content字段内容 
xml = xml&"</list>" '每读完一条数据，就闭合list标签 
Rs.MoveNext '执行下一条数据的读取 
Wend '如果数据库中没有了数据．则结束循环 
Close_Conn '关闭数据库链接 
End Sub 

Sub Add_Data '添加数据过程 
On Error Resume Next '如果发生错误继续执行程序 
OpenConn '打开数据库链接 

str = Trim(Request.Form("str")) '接收客户端传过来的str内容 
If str = "" Then 
xml = xml&"<msg>3</msg>" '如果提交的内容为空．返回3 
Exit Sub '退出过程 
End If 

Sql = "Insert Into del_table (content) values ('"&str&"')" 
Conn.Execute(Sql) '执行添加数据 
If Err.Number = 0 Then '判断是否有错误发生， 
xml = xml&"<msg>0</msg>" '如果没有错误发生，则证明数据已经成功．返回0 
Else 
xml = xml&"<msg>1</msg>" '如果发生错误．则证明有错误发生．数据很可能添加失败 
End If 
Close_Conn 
End Sub 

Sub Del_Data '删除数据过程 
On Error Resume Next 
OpenConn 
id = Request("id") 
Sql = "Delete From del_table where id="&id 
Conn.Execute(sql) 
If Err.Number = 0 Then 
xml = xml&"<msg>0</msg>" 
Else 
xml = xml&"<msg>1</msg>" 
End If 
Close_Conn 
End Sub 
%> 

我在服务端使用的是Asp输出xml格式数据技术．我在前几篇都有讲解．你可以使用php，.net，Jsp轻松模拟出来．
(!--#include file="Conn.Asp"--)是我的数据库链接文件．为保安全我不透露数据库名字．本次读取的表名是：del_table　　字段为：ID，Content
今天就讲到这里，有什么不明白地方．请加 ajax技术交流群：110167482
下一篇我们讲：ajax读取数据之分页显示篇