<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 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讀取數據．我只講今天讀取過程中的重點，先看下服務端網頁
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 SubSub 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 IfSql = "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 SubSub 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
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
