Ajax添加數(shù)據(jù)與刪除篇實現(xiàn)代碼

更新時間：2010年10月25日 21:24:55 作者：

Hello 大家好！這個ajax系列教程講到這里已經(jīng)完成50%了．第4篇講了ajax向數(shù)據(jù)庫添加數(shù)據(jù)，第5篇講了ajax修改數(shù)據(jù)庫中的數(shù)據(jù)．今天我們來講ajax添加數(shù)據(jù)與刪除并存的實例效果．

如果你真的把前幾篇掌握了．實現(xiàn)ajax刪除功能會易如反常．我所要教你的是．靈活利用JavaScript和Dom來實現(xiàn)一個酷酷的刪除效果．其實你學(xué)習(xí)到這里．已經(jīng)能夠明白，在ajax技術(shù)中那些被請求的服務(wù)端網(wǎng)頁，在非ajax應(yīng)用中并無太大區(qū)別．無非也是接受前端發(fā)過來的請求．在后臺執(zhí)行一些操作而已！學(xué)習(xí)完這篇教程以后．你會明白想要實現(xiàn)夠炫夠酷的的ajax效果．你必須要熟練掌握J(rèn)avaScript Dom 這些技術(shù)精通．
剛剛我喝多了，上面的這段話是我在兩天前就寫好的．我本來想直接睡覺的．但我想試試．是不是在我喝酒之后，我能夠講的更好．
其實我覺得在我酒醉迷離的時候更能很好的將我的知識傳授與你．今天的添加效果與前一篇的添加數(shù)據(jù)一樣．但今天的刪除效果或許是你從未看到過的．想要刪除那條數(shù)據(jù)．請單擊他．然后點擊刪除按扭．這跟桌面應(yīng)用程序并無二樣．a(chǎn)jax就是這樣的神奇．不然他不會被全世界的Web開發(fā)人員所追求！還是先看實例吧．你會為此而感到驚訝的！

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>ajax無刷新添加與刪除數(shù)據(jù)</title> 
<style> 
body{ 
font-size:12px; 
} 
table{ 
border-collapse:collapse; 

} 
</style> 
</head> 
<body> 
為顯示更流暢，我們只讀取數(shù)據(jù)庫內(nèi)最新的10條數(shù)據(jù)．由于在線測試人數(shù)多．都在操作一個數(shù)據(jù)庫．可能會出現(xiàn)并發(fā)情況！ 
<hr/> 
輸入內(nèi)容：<input id="str" type="input" /> <input type="button" value="確定添加" onclick="add_Post()"/> 
<span id="msg" style="color:red"></span> 
<table border="1"><!--該表格用來顯示數(shù)據(jù)內(nèi)容--> 
<tbody id="a"></tbody> 
</table> 
<span style="color:red">操作提示：請用鼠標(biāo)單擊你想要刪除的數(shù)據(jù)．然后點擊刪除按扭！</span> 
<input id="hid_id" type="hidden" /> 
<input type="button" value="刪除數(shù)據(jù)" onclick="del_Data()" /> 
<script type="text/javascript"> 
function ajax_xmlhttp(){ 
//在IE中創(chuàng)建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; 
} 
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結(jié)束 
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest 
if(!_xmlhttp && typeof XMLHttpRequest != "undefined") 
{ 
_xmlhttp=new XMLHttpRequest(); 
} 
return _xmlhttp; 
} 

//讀取數(shù)據(jù)函數(shù) 
function Read(){ 
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量． 
ajax.open("post","Add_Del_Data.asp?action=read",true);//設(shè)置請求方式，請求的網(wǎng)頁，url的action參數(shù)為read，異步請求 
ajax.onreadystatechange = function(){//你也可以這里指定一個已經(jīng)寫好的函數(shù)名稱 
if(ajax.readyState == 4){//數(shù)據(jù)返回成功 
if(ajax.status == 200){//http請求狀態(tài)碼返回ok 
var xmlData = ajax.responseXML;//以xml格式接收返回的數(shù)據(jù)，并保存在xmlData變量里 
var list = xmlData.getElementsByTagName("list");//在返回的數(shù)據(jù)里，獲取所有l(wèi)ist標(biāo)簽 
if(list.length!=0){ 
var t = document.getElementById("a");//獲取展示數(shù)據(jù)的表格 
while(t.rows.length!=0){ //在讀取數(shù)據(jù)時如果表格已存行．一律刪除 
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);//提交請求，參數(shù)為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; 
} 

//刪除數(shù)據(jù)函數(shù) 
function del_Data(){ 
var mesage = document.getElementById("msg");//獲取顯示操作信息的span 
mesage.innerHTML="正在刪除請稍候......"; 
var table = document.getElementById("a");//獲取要顯示數(shù)據(jù)的表格 
if(table.rows.length == 0){ 
mesage.innerHTML = "表格內(nèi)沒有數(shù)據(jù)可供刪除！"; 
return; 
} 
var id = document.getElementById("hid_id"); 
if(id.value.length == 0){ 
mesage.innerHTML = "您還沒有選擇數(shù)據(jù)！"; 
return; 
} 
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象 
ajax.open("post","Add_Del_data.asp?action=del",true);//設(shè)置請求方式，請求文件，異步請求 

var param = "id="+escape(id.value);//獲取要刪除數(shù)據(jù)的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 = "成功刪除數(shù)據(jù)！"; 
var tr = document.getElementById(id.value);//獲取當(dāng)前選擇的行 
tr.parentNode.removeChild(tr);//引用該行的父元素．然后刪除該行． 
id.value="";//刪除完成清空文本框里的值， 
} 
if(msg == 1){ 
mesage.innerHTML = "服務(wù)端發(fā)生錯誤，刪除失??！"; 
} 
} 
} 
} 
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); 
ajax.send(param); 
} 

//提交數(shù)據(jù)函數(shù) 
function add_Post(){ 
var msgaes = document.getElementById("msg");//用來顯示提示信息 
var str = document.getElementById("str");//接收輸入的內(nèi)容 
if(str.value.length == 0){ 
msgaes.innerHTML = "不接受空內(nèi)容！" 
return; 
} 
msgaes.innerHTML = "正在提交"; 
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象 
ajax.open("post","Add_Del_data.asp?action=add",true);//設(shè)置請求方式，請求文件，異步請求 

var param = "str="+escape(str.value);//獲取你輸入的內(nèi)容,注意這里的str,服務(wù)端將接收str中的值 
ajax.onreadystatechange = function(){ 
if(ajax.readyState==4){ 
if(ajax.status==200){ 
var msg = ajax.responseXML.getElementsByTagName("msg");//獲取服務(wù)端返回的msg標(biāo)簽 
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 = "不接受空的內(nèi)容"; 
return; 
} 
else if(msg[0].firstChild.nodeValue == 1){ 
msgaes.innerHTML = "服務(wù)端發(fā)生錯誤，數(shù)據(jù)添加失??！"; 
return; 
} 
else{ 
msgaes.innerHTML = "該實例供學(xué)習(xí)使用．請不要惡意輸入．謝謝！"; 
} 
} 
} 
} 
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服務(wù)端提交數(shù)據(jù)，必須設(shè)置該頭．否則服務(wù)端會接收不到 
ajax.send(param);//注意send方法向服務(wù)端提交param變量中的內(nèi)容． 
} 
</script> 
<a href="http://m.dhdzp.com" target="_blank">腳本之家+</a> 
</body> 
</html> 

怎么樣效果是不是很酷？上面的文本框里是前臺的html源碼．我們先來講一下我們在前端干了什么．從body標(biāo)簽開始講起．

一段友情提示的文字．告訴你會出現(xiàn)些什么情況！
添加數(shù)據(jù)的文本框和按扭！用來向服務(wù)端數(shù)據(jù)庫寫入數(shù)據(jù)內(nèi)容．
一個span標(biāo)簽．ID為msg，用來顯示你當(dāng)前操作的信息
一個表格．表格內(nèi)有tbody元素，id為a．用來顯示讀取到的數(shù)據(jù)．你可以在表格內(nèi)選擇要刪除的數(shù)據(jù)．
一個隱藏的輸入框．當(dāng)你選擇數(shù)據(jù)時．會把該數(shù)據(jù)的id值放到輸入框里．刪除時引用這個值．提交給服務(wù)端
刪除數(shù)據(jù)按扭．定義了一個onclick單擊事件．del_Data()函數(shù)．向服務(wù)發(fā)送刪除指令
下面進(jìn)入script腳本部份．script里面有5個自定義函數(shù)．分別是：ajax_xmlhttp()，Read()，add_Event()，del_Data()，add_Post()．我們來一一講解函數(shù)的作用．

1、ajax_xmlhttp();創(chuàng)建一個可用的XMLHTTPRequest對象，如果你還不知道什么是XMLHTTPRequest，請參閱：XMLHTTPRequest
2、Read();讀取數(shù)據(jù)函數(shù)．前幾篇教程中都有講過ajax讀取數(shù)據(jù)．我只講今天讀取過程中的重點，先看下服務(wù)端網(wǎng)頁輸出的xml．a(chǎn)dd_del_data.asp?action=read．從服務(wù)端傳回的xml數(shù)據(jù)里獲取所有的list標(biāo)簽以后．我們先使用getElementById方法獲取到了存放數(shù)據(jù)的表格．然后循環(huán)遍歷這些list 標(biāo)簽．每個list代表一條數(shù)據(jù)．每個list內(nèi)包含著2個子元素．第１個子元素內(nèi)存儲著該條數(shù)據(jù)的id值，第２個子元素內(nèi)存儲著該條數(shù)據(jù)的文本內(nèi)容．好，我們來看下Read()函數(shù)中for循環(huán)里的語句：
（１）：var tr = t.insertRow(t.rows.length);每循環(huán)一個list便為表格增加一行．因為表格的每一行顯示一條數(shù)據(jù)．并返回對該行的引用．
（２）：tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);為新增的行設(shè)置一個id屬性．并為該屬性指定一個值．注意，這里是重點．list[i].childNodes[0].firstChild.nodeValue這句的意思是要獲取每條數(shù)據(jù)中id字段的值．也就是該條數(shù)據(jù)的id值．我們將這個值寫給tr的id屬性．以方便我們用鼠標(biāo)點擊了某行以后來引用這個id．
（３）：tr.onclick=function(e){add_Event(e)};緊接著再為新增的行綁定一個自定義函數(shù)．函數(shù)的名稱是add_Event();
（４）：var td.tr.insertCell(0);為新的增添加一列．并返回對該列的引用．
（５）：td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;在該列中寫入第i個list的第2個子元素中的文本內(nèi)容．也就是content字段里的內(nèi)容了
我們把每條數(shù)據(jù)的id設(shè)定給表格中每一行的id屬性．把每條數(shù)據(jù)中的content中的文本內(nèi)容填寫到每一行中的單元格內(nèi)．至此整個數(shù)據(jù)的顯示過程已完成！
　
3、add_Event(e);我們在Read函數(shù)內(nèi)向表格的每一行綁定了該函數(shù)．并利用閉包技術(shù)向addEvent傳遞了事件對象．該函數(shù)的作用就是找出你單擊的行．并獲得該行數(shù)據(jù)的id：
（１）：e = e || window.event;標(biāo)準(zhǔn)化事件對象．FF等瀏覽器利用參數(shù)傳遞，IE可直接使用window.event．
（２）：var elem = e.target || e.srcElement; 請參閱：target或srcElement．標(biāo)準(zhǔn)化觸發(fā)事件的元素．是那個元素觸發(fā)了該事件．在這里的意思是說：你點擊了表格中的那一行．但事實上我取到的是TD，而并非TR．這應(yīng)該是傳說中的事件捕獲和冒泡所致．沒關(guān)系我們使用tagName判斷一下如果是TD，則取該TD的父元素．這下肯定是TR了吧．呵呵．
（３）：var table = elem.parentNode;取TR的父元素．就是那個tbody．并返回對tbody的引用．
（４）：使用一個for循環(huán)遍歷tbody中所有的行．將每行的背景顏色設(shè)置為空．
（５）：elem.style.background="#999000";循環(huán)完畢以后．為你點擊的這一行添加一個背景色．
（６）：document.getElementById("hid_id").value = elem.id;獲取網(wǎng)頁中那個隱藏的文本框．并將你點擊的這一行的id寫入到文本框內(nèi)．該行的id屬性值．正是你選取數(shù)據(jù)的id值．而且每點擊一行．這個文本框里的值都會隨著你點擊的行而改變．而我們在提交刪除的函數(shù)里正是引用的該文本框里的值．

4、del_Data();該函數(shù)的作用：把被刪除的數(shù)據(jù)的ID提交給服務(wù)端請求的網(wǎng)頁．然后根據(jù)服務(wù)端返回的一個msg標(biāo)簽．來判斷數(shù)據(jù)是否被成功刪除．老規(guī)矩我只講以前沒有涉及過的內(nèi)容：
（１）：點擊刪除按扭啟用del_Data()函數(shù)．我們先找出id為msg的span標(biāo)簽．然后寫一段操作信息．告訴你正在刪除數(shù)據(jù)．
（２）：獲取要存放數(shù)據(jù)的表格．也就是那個id為a的tbody．判斷tbody中是否有數(shù)據(jù)．如果tbody中沒有任何數(shù)據(jù)．則告訴你沒有數(shù)據(jù)可供選擇．然后退出函數(shù)．不再往下執(zhí)行．
（３）：獲取那個隱藏的文本框．并判斷文本框是否有值．如果為空顯示一段提示信息．退出函數(shù)．不再執(zhí)行！如果有值存在則證明你選擇了某條數(shù)據(jù)．下面的ajax會將你選擇的這條數(shù)據(jù)提交給服務(wù)端網(wǎng)頁進(jìn)行刪除
（４）：關(guān)于ajax是如何提交和回收數(shù)據(jù)的．請參閱"ajax初試之讀取數(shù)據(jù)篇"與"ajax讀取數(shù)到表格"．
（５）：del_Data()重點是這里：判斷服務(wù)端傳回那個msg標(biāo)簽．如果該標(biāo)簽的內(nèi)容為0，則代表服務(wù)端工作一切順利，數(shù)據(jù)已被成功刪除．
（６）：數(shù)據(jù)被成功刪除以后：var tr = document.getElementById(id.value);獲取當(dāng)前選擇的行．
（７）：tr.parentNode.removeChild(tr);//引用該行的父元素tbody，刪除該行！
至此刪除數(shù)據(jù)完成．其經(jīng)過是接受服務(wù)端發(fā)回來的信號．如果刪除成功，則刪除前端選擇的表格行．如果失敗則給出提示信息！
5、add_Post();該函數(shù)與上一篇中基本一樣．提交添加的數(shù)據(jù)給服務(wù)端．唯一不同的地方是：當(dāng)數(shù)據(jù)被成功添加以后．我們又調(diào)用了Read();函數(shù)來讀取新的數(shù)據(jù)．因為我們必須要獲得新添加數(shù)據(jù)的正確id，以便我們可以正確刪除！
好了，前端的代碼已經(jīng)講解完了．
下面是本次ajax實例教程請求的服務(wù)端網(wǎng)頁源碼：

復(fù)制代碼代碼如下:

 
<!--#include file="Conn.Asp"--> 
<% 
'出自：http://Www.Web666.Net 
'作者：康董 
'如需轉(zhuǎn)載請務(wù)必保留以上信息 
'定義一個變量，來保存xml數(shù)據(jù) 
xml="<?xml version='1.0' encoding='gb2312'?><body>" 
action=Request.QueryString("action") '使用get方式接受一個action來判斷客戶端想要執(zhí)行什么操作 
Select case action 
case "read" '如果為read則執(zhí)行讀取數(shù)據(jù)的操作 
Call Read 
case "add" '如果為add則執(zhí)行添加數(shù)據(jù) 
Call Add_Data 
case "del" '如果為del則執(zhí)行刪除數(shù)據(jù)的操作 
Call Del_Data 
case else 
xml = xml&"<msg>請求參數(shù)錯誤，請不要試圖非法操作！</msg>" 
End Select 
xml=xml&"</body>" 
Response.Clear 
Response.ContentType="text/xml" 
Response.CharSet="gb2312" 
Response.write xml 
Response.End 


Sub Read '定義一個讀取數(shù)據(jù)的過程 
Call OpenConn '打開數(shù)據(jù)庫鏈接 
Sql = "Select top 10 * From del_table order by id desc" '打開數(shù)據(jù)庫中名字為del_table的表 
Set Rs = Conn.Execute(Sql) '執(zhí)行Sql語句，并將sql的索引賦值給rs變量 

While Not Rs.Eof '如果表中有數(shù)據(jù)．則一直循環(huán)讀取 
xml = xml&"<list>" '每讀取一條數(shù)據(jù)則創(chuàng)建一個list標(biāo)簽 
xml = xml&"<id>"&Rs("id")&"</id>" 'id字段內(nèi)容 
xml = xml&"<content>"&Rs("content")&"</content>" 'content字段內(nèi)容 
xml = xml&"</list>" '每讀完一條數(shù)據(jù)，就閉合list標(biāo)簽 
Rs.MoveNext '執(zhí)行下一條數(shù)據(jù)的讀取 
Wend '如果數(shù)據(jù)庫中沒有了數(shù)據(jù)．則結(jié)束循環(huán) 
Close_Conn '關(guān)閉數(shù)據(jù)庫鏈接 
End Sub 

Sub Add_Data '添加數(shù)據(jù)過程 
On Error Resume Next '如果發(fā)生錯誤繼續(xù)執(zhí)行程序 
OpenConn '打開數(shù)據(jù)庫鏈接 

str = Trim(Request.Form("str")) '接收客戶端傳過來的str內(nèi)容 
If str = "" Then 
xml = xml&"<msg>3</msg>" '如果提交的內(nèi)容為空．返回3 
Exit Sub '退出過程 
End If 

Sql = "Insert Into del_table (content) values ('"&str&"')" 
Conn.Execute(Sql) '執(zhí)行添加數(shù)據(jù) 
If Err.Number = 0 Then '判斷是否有錯誤發(fā)生， 
xml = xml&"<msg>0</msg>" '如果沒有錯誤發(fā)生，則證明數(shù)據(jù)已經(jīng)成功．返回0 
Else 
xml = xml&"<msg>1</msg>" '如果發(fā)生錯誤．則證明有錯誤發(fā)生．?dāng)?shù)據(jù)很可能添加失敗 
End If 
Close_Conn 
End Sub 

Sub Del_Data '刪除數(shù)據(jù)過程 
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 
%> 

我在服務(wù)端使用的是Asp輸出xml格式數(shù)據(jù)技術(shù)．我在前幾篇都有講解．你可以使用php，.net，Jsp輕松模擬出來．
(!--#include file="Conn.Asp"--)是我的數(shù)據(jù)庫鏈接文件．為保安全我不透露數(shù)據(jù)庫名字．本次讀取的表名是：del_table　　字段為：ID，Content
今天就講到這里，有什么不明白地方．請加 ajax技術(shù)交流群：110167482
下一篇我們講：ajax讀取數(shù)據(jù)之分頁顯示篇

您可能感興趣的文章: