Ajax中怎么添加與刪除數(shù)據(jù)，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、海鹽網(wǎng)站維護(hù)、網(wǎng)站推廣。

代碼如下:

為顯示更流暢，我們只讀取數(shù)據(jù)庫內(nèi)最新的10條數(shù)據(jù)．由于在線測試人數(shù)多．都在操作一個數(shù)據(jù)庫．可能會出現(xiàn)并發(fā)情況！

怎么樣效果是不是很酷？上面的文本框里是前臺的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ù)．我只講今天讀取過程中的重點(diǎn)，先看下服務(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屬性．并為該屬性指定一個值．注意，這里是重點(diǎn)．list[i].childNodes[0].firstChild.nodeValue這句的意思是要獲取每條數(shù)據(jù)中id字段的值．也就是該條數(shù)據(jù)的id值．我們將這個值寫給tr的id屬性．以方便我們用鼠標(biāo)點(diǎn)擊了某行以后來引用這個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ā)了該事件．在這里的意思是說：你點(diǎn)擊了表格中的那一行．但事實上我取到的是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)完畢以后．為你點(diǎn)擊的這一行添加一個背景色．
（６）：document.getElementById("hid_id").value = elem.id;獲取網(wǎng)頁中那個隱藏的文本框．并將你點(diǎn)擊的這一行的id寫入到文本框內(nèi)．該行的id屬性值．正是你選取數(shù)據(jù)的id值．而且每點(diǎn)擊一行．這個文本框里的值都會隨著你點(diǎn)擊的行而改變．而我們在提交刪除的函數(shù)里正是引用的該文本框里的值．

4、del_Data();該函數(shù)的作用：把被刪除的數(shù)據(jù)的ID提交給服務(wù)端請求的網(wǎng)頁．然后根據(jù)服務(wù)端返回的一個msg標(biāo)簽．來判斷數(shù)據(jù)是否被成功刪除．老規(guī)矩我只講以前沒有涉及過的內(nèi)容：
（１）：點(diǎn)擊刪除按扭啟用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()重點(diǎn)是這里：判斷服務(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ù)制代碼 代碼如下:

<%
'出自：http://Www.Web666.Net
'作者：康董
'如需轉(zhuǎn)載請務(wù)必保留以上信息
'定義一個變量，來保存xml數(shù)據(jù)
xml=""
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&"請求參數(shù)錯誤，請不要試圖非法操作！"
End Select
xml=xml&""
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&"" '每讀取一條數(shù)據(jù)則創(chuàng)建一個list標(biāo)簽
xml = xml&""&Rs("id")&"" 'id字段內(nèi)容
xml = xml&""&Rs("content")&"" 'content字段內(nèi)容
xml = xml&"" '每讀完一條數(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&"3" '如果提交的內(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&"0" '如果沒有錯誤發(fā)生，則證明數(shù)據(jù)已經(jīng)成功．返回0
Else
xml = xml&"1" '如果發(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&"0"
Else
xml = xml&"1"
End If
Close_Conn
End Sub
%>

看完上述內(nèi)容，你們掌握Ajax中怎么添加與刪除數(shù)據(jù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！