<html>
<head>
<title>ajax無(wú)刷新添加與刪除數(shù)據(jù)</title>
<style>
body{
font-size:12px;
}
table{
border-collapse:collapse;}
</style>
</head>
<body>
為顯示更流暢,我們只讀取數(shù)據(jù)庫(kù)內(nèi)最新的10條數(shù)據(jù).由于在線測(cè)試人數(shù)多.都在操作一個(gè)數(shù)據(jù)庫(kù).可能會(huì)出現(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"><!--該表格用來(lái)顯示數(shù)據(jù)內(nèi)容-->
<tbody id="a"></tbody>
</table>
<span style="color:red">操作提示:請(qǐng)用鼠標(biāo)單擊你想要?jiǎng)h除的數(shù)據(jù).然后點(diǎn)擊刪除按扭!</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對(duì)象賦值給一個(gè)變量.
ajax.open("post","Add_Del_Data.asp?action=read",true);//設(shè)置請(qǐng)求方式,請(qǐng)求的網(wǎng)頁(yè),url的action參數(shù)為read,異步請(qǐng)求
ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState == 4){//數(shù)據(jù)返回成功
if(ajax.status == 200){//http請(qǐng)求狀態(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ù)時(shí)如果表格已存行.一律刪除
t.removeChild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertRow(t.rows.length);//有幾個(gè)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);//提交請(qǐng)求,參數(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="正在刪除請(qǐng)稍候......";
var table = document.getElementById("a");//獲取要顯示數(shù)據(jù)的表格
if(table.rows.length == 0){
mesage.innerHTML = "表格內(nèi)沒(méi)有數(shù)據(jù)可供刪除!";
return;
}
var id = document.getElementById("hid_id");
if(id.value.length == 0){
mesage.innerHTML = "您還沒(méi)有選擇數(shù)據(jù)!";
return;
}
var ajax = ajax_xmlhttp();//定義xmlhttprequest對(duì)象
ajax.open("post","Add_Del_data.asp?action=del",true);//設(shè)置請(qǐng)求方式,請(qǐng)求文件,異步請(qǐng)求var param = "id="+escape(id.value);//獲取要?jiǎng)h除數(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ā)生錯(cuò)誤,刪除失敗!";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send(param);
}//提交數(shù)據(jù)函數(shù)
function add_Post(){
var msgaes = document.getElementById("msg");//用來(lái)顯示提示信息
var str = document.getElementById("str");//接收輸入的內(nèi)容
if(str.value.length == 0){
msgaes.innerHTML = "不接受空內(nèi)容!"
return;
}
msgaes.innerHTML = "正在提交";
var ajax = ajax_xmlhttp();//定義xmlhttprequest對(duì)象
ajax.open("post","Add_Del_data.asp?action=add",true);//設(shè)置請(qǐng)求方式,請(qǐng)求文件,異步請(qǐng)求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ā)生錯(cuò)誤,數(shù)據(jù)添加失敗!";
return;
}
else{
msgaes.innerHTML = "該實(shí)例供學(xué)習(xí)使用.請(qǐng)不要惡意輸入.謝謝!";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服務(wù)端提交數(shù)據(jù),必須設(shè)置該頭.否則服務(wù)端會(huì)接收不到
ajax.send(param);//注意send方法向服務(wù)端提交param變量中的內(nèi)容.
}
</script>
<a target="_blank">腳本之家+</a>
</body>
</html>
怎么樣效果是不是很酷?上面的文本框里是前臺(tái)的html源碼.我們先來(lái)講一下我們?cè)谇岸烁闪耸裁矗畯腷ody標(biāo)簽開始講起.
一段友情提示的文字.告訴你會(huì)出現(xiàn)些什么情況!
添加數(shù)據(jù)的文本框和按扭!用來(lái)向服務(wù)端數(shù)據(jù)庫(kù)寫入數(shù)據(jù)內(nèi)容.
一個(gè)span標(biāo)簽.ID為msg,用來(lái)顯示你當(dāng)前操作的信息
一個(gè)表格.表格內(nèi)有tbody元素,id為a.用來(lái)顯示讀取到的數(shù)據(jù).你可以在表格內(nèi)選擇要?jiǎng)h除的數(shù)據(jù).
一個(gè)隱藏的輸入框.當(dāng)你選擇數(shù)據(jù)時(shí).會(huì)把該數(shù)據(jù)的id值放到輸入框里.刪除時(shí)引用這個(gè)值.提交給服務(wù)端
刪除數(shù)據(jù)按扭.定義了一個(gè)onclick單擊事件.del_Data()函數(shù).向服務(wù)發(fā)送刪除指令
下面進(jìn)入script腳本部份.script里面有5個(gè)自定義函數(shù).分別是:ajax_xmlhttp(),Read(),add_Event(),del_Data(),add_Post().我們來(lái)一一講解函數(shù)的作用.1、ajax_xmlhttp();創(chuàng)建一個(gè)可用的XMLHTTPRequest對(duì)象,如果你還不知道什么是XMLHTTPRequest,請(qǐng)參閱:XMLHTTPRequest
2、Read();讀取數(shù)據(jù)函數(shù).前幾篇教程中都有講過(guò)ajax讀取數(shù)據(jù).我只講今天讀取過(guò)程中的重點(diǎn),先看下服務(wù)端網(wǎng)頁(yè)
4、del_Data();該函數(shù)的作用:把被刪除的數(shù)據(jù)的ID提交給服務(wù)端請(qǐng)求的網(wǎng)頁(yè).然后根據(jù)服務(wù)端返回的一個(gè)msg標(biāo)簽.來(lái)判斷數(shù)據(jù)是否被成功刪除.老規(guī)矩我只講以前沒(méi)有涉及過(guò)的內(nèi)容:
(1):點(diǎn)擊刪除按扭啟用del_Data()函數(shù).我們先找出id為msg的span標(biāo)簽.然后寫一段操作信息.告訴你正在刪除數(shù)據(jù).
(2):獲取要存放數(shù)據(jù)的表格.也就是那個(gè)id為a的tbody.判斷tbody中是否有數(shù)據(jù).如果tbody中沒(méi)有任何數(shù)據(jù).則告訴你沒(méi)有數(shù)據(jù)可供選擇.然后退出函數(shù).不再往下執(zhí)行.
(3):獲取那個(gè)隱藏的文本框.并判斷文本框是否有值.如果為空顯示一段提示信息.退出函數(shù).不再執(zhí)行!如果有值存在則證明你選擇了某條數(shù)據(jù).下面的ajax會(huì)將你選擇的這條數(shù)據(jù)提交給服務(wù)端網(wǎng)頁(yè)進(jìn)行刪除
(4):關(guān)于ajax是如何提交和回收數(shù)據(jù)的.請(qǐng)參閱"ajax初試之讀取數(shù)據(jù)篇"與"ajax讀取數(shù)到表格".
(5):del_Data()重點(diǎn)是這里:判斷服務(wù)端傳回那個(gè)msg標(biāo)簽.如果該標(biāo)簽的內(nèi)容為0,則代表服務(wù)端工作一切順利,數(shù)據(jù)已被成功刪除.
(6):數(shù)據(jù)被成功刪除以后:var tr = document.getElementById(id.value);獲取當(dāng)前選擇的行.
(7):tr.parentNode.removeChild(tr);//引用該行的父元素tbody,刪除該行!
至此刪除數(shù)據(jù)完成.其經(jīng)過(guò)是接受服務(wù)端發(fā)回來(lái)的信號(hào).如果刪除成功,則刪除前端選擇的表格行.如果失敗則給出提示信息!
5、add_Post();該函數(shù)與上一篇中基本一樣.提交添加的數(shù)據(jù)給服務(wù)端.唯一不同的地方是:當(dāng)數(shù)據(jù)被成功添加以后.我們又調(diào)用了Read();函數(shù)來(lái)讀取新的數(shù)據(jù).因?yàn)槲覀儽仨氁@得新添加數(shù)據(jù)的正確id,以便我們可以正確刪除!
好了,前端的代碼已經(jīng)講解完了.
下面是本次ajax實(shí)例教程請(qǐng)求的服務(wù)端網(wǎng)頁(yè)源碼:
代碼如下:
<!--#include file="Conn.Asp"-->
<%
'出自:http://Www.Web666.Net
'作者:康董
'如需轉(zhuǎn)載請(qǐng)務(wù)必保留以上信息
'定義一個(gè)變量,來(lái)保存xml數(shù)據(jù)
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") '使用get方式接受一個(gè)action來(lái)判斷客戶端想要執(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>請(qǐng)求參數(shù)錯(cuò)誤,請(qǐng)不要試圖非法操作!</msg>"
End Select
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End
Sub Read '定義一個(gè)讀取數(shù)據(jù)的過(guò)程
Call OpenConn '打開數(shù)據(jù)庫(kù)鏈接
Sql = "Select top 10 * From del_table order by id desc" '打開數(shù)據(jù)庫(kù)中名字為del_table的表
Set Rs = Conn.Execute(Sql) '執(zhí)行Sql語(yǔ)句,并將sql的索引賦值給rs變量While Not Rs.Eof '如果表中有數(shù)據(jù).則一直循環(huán)讀取
xml = xml&"<list>" '每讀取一條數(shù)據(jù)則創(chuàng)建一個(gè)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ù)庫(kù)中沒(méi)有了數(shù)據(jù).則結(jié)束循環(huán)
Close_Conn '關(guān)閉數(shù)據(jù)庫(kù)鏈接
End SubSub Add_Data '添加數(shù)據(jù)過(guò)程
On Error Resume Next '如果發(fā)生錯(cuò)誤繼續(xù)執(zhí)行程序
OpenConn '打開數(shù)據(jù)庫(kù)鏈接str = Trim(Request.Form("str")) '接收客戶端傳過(guò)來(lái)的str內(nèi)容
If str = "" Then
xml = xml&"<msg>3</msg>" '如果提交的內(nèi)容為空.返回3
Exit Sub '退出過(guò)程
End IfSql = "Insert Into del_table (content) values ('"&str&"')"
Conn.Execute(Sql) '執(zhí)行添加數(shù)據(jù)
If Err.Number = 0 Then '判斷是否有錯(cuò)誤發(fā)生,
xml = xml&"<msg>0</msg>" '如果沒(méi)有錯(cuò)誤發(fā)生,則證明數(shù)據(jù)已經(jīng)成功.返回0
Else
xml = xml&"<msg>1</msg>" '如果發(fā)生錯(cuò)誤.則證明有錯(cuò)誤發(fā)生.?dāng)?shù)據(jù)很可能添加失敗
End If
Close_Conn
End SubSub Del_Data '刪除數(shù)據(jù)過(guò)程
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
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com