Ajax修改資料即時顯示篇實現代碼

來源:互聯網
上載者:User

我們這次要請求的服務端網頁是:Edit_Data.Asp 待會我會在本次ajax教程中提供該asp檔案的源碼.
其實在你學會了怎麼使用ajax添加資料時,想實現修改資料對你來說已經很容易了!費話不說先看前端的JavaScript代碼和本次的ajax執行個體效果!

複製代碼 代碼如下:<html>
<head>
<title>ajax修改資料</title>
<style>
body{
font-size:12px;
}
</style>
</head>
<body>
<p>同時線上測試的人很多,有時可能會出現並發修改現象.</p>
<hr/>
<table border="1">
<thead><tr><td>資料編號</td><td>資料內容</td></tr></thead>
<tbody id="a"><!--用於存放內容的tbody-->
</tbody>
</table>

輸入編號:<input id="data_id" type="text" /><br/>
修改內容:<input id="data_content" type="text" /><br/>

<input type="button" value="確定修改" onclick="Edit_Data()"/>
<span id="msgaes" style="color:red"></span>
<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","Edit_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");//擷取展示資料的表格
for(var i=0;i<list.length;i++){
var tr = t.insertRow();//有幾個list就為表格增加幾行.
for(var k=0;k<list[i].childNodes.length;k++){ //遍曆每個list中的子項目
var td = tr.insertCell();//每個list中有幾個子項目,便為一行增加幾列
td.innerHTML = list[i].childNodes[k].firstChild.nodeValue;//在儲存格內寫入第i個list的第k個子項目中的常值內容
}
}
}
}
}
}
ajax.send(null);//提交請求,參數為null
}
window.load = Read();

//修改資料的函數
function Edit_Data(){
var msgaes = document.getElementById("msgaes");//用來顯示一些當前操作資訊
var id = document.getElementById("data_id");//擷取要修改的資料編號
var content = document.getElementById("data_content");//擷取修改後的內容
if(id.value.length == 0 || content.value.length == 0){
msgaes.innerHTML = "編號或內容不許為空白!";
return;
}
//下面這行將id和content的值賦給param變數,然後用send方法提交param
var param = "id="+escape(id.value)+ "&content="+escape(content.value);
var ajax = ajax_xmlhttp();
ajax.open("post","Edit_Data.asp?action=edit",true);
ajax.onreadystatechange = function(){//
if(ajax.readyState == 4){
if(ajax.status == 200){
var xmlData = ajax.responseXML;

var msg = xmlData.getElementsByTagName("msg");
if(msg.length!=0){
switch (msg[0].firstChild.nodeValue){//判斷msg的值
case "0": msgaes.innerHTML = "修改資料成功!";
var a = document.getElementById("a");
for(var i=0;i<a.rows.length;i++){//遍曆表格的每一列.這個方法有點笨
for(var k=0;k<a.rows[i].cells.length;k++){
if(a.rows[i].cells[0].innerHTML == id.value){
a.rows[i].cells[1].innerHTML = content.value;
id.value="";
content.value="";
return;
}

}
}
break;
case "1": msgaes.innerHTML = "服務端寫入資料時發生錯誤!";
break;
case "3": msgaes.innerHTML = "請正確填寫要修改的資料編號和修改內容!";
break;
case "4": msgaes.innerHTML = "資料庫中不存在你輸入的資料編號,請重新輸入!";
break;
default: msgaes.innerHTML = "發生未知錯誤!請聯絡作者:QQ30458885";
break;
}
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//
ajax.send(param);
}
</script>
</body>
</html>

我們來分析上面的ajax前端的代碼.代碼中一共有三個函數.分別為:ajax_xmlhttp(),Read(),Edit_Data().我們依次來講解他們的作用.

1、alax_xmlhttp():用來建立一個可用得XMLHTTPRequest對象,如果你還不知道什麼是XMLHTTPRequest,請參考:XMLHTTPRequest對象詳解
2、Read():讀取資料函數,用來讀取服務端資料庫中已存在的資料.該函數與前幾篇的讀取資料函數基本上差不多.我不再重複講解相同之處.如不明白.請參閱前幾篇ajax系列教程!只是在返回xml資料以後的解析中略有不同.先看下服務端讀取資料的格式: Edit_Data.Asp?action=read. 在服務端輸出的xml資料中有5個list標籤.這代表資料庫中有5條資料.而每個list的標籤下麵包含著id和content兩個子項目.這正是資料庫中的每條資料的內容. id欄位和content欄位.明白了這些.我們來講Read函數的是如何解析這些返回的xml資料的.從list=xmlData.getElementsBytagName("list")的開始講起,首先使用if來判斷這些list標籤是否被成功擷取,如果是,則擷取我們顯示資料的表格.然後使用for遍曆 這些list.每迴圈一個list的就為我們要顯示資料的表格增加一行,因為每個list的內含著一條資料內容.而我們的表格每一行要顯示一條資料.那麼每一行建立完以後.我們再使用一個for來遍曆當前list的子項目.每遍曆一個子項目便為該行增加一列.然後再 為該列寫入當前list中的第k個子項目的常值內容.第一列對應id裡的內容,第二列對應content裡的內容.如果你還不明白我再講什麼.請惡補一下javascript的for迴圈!和涉及到的Dom相關指令.本站提供的Dom手冊有每個指令的詳細解釋!
3、Edit_Data():該函數用來提交你輸入的資料編號和要修改的資料內容.只要資料被成功提交以後.無論發生什麼事情.服務端都會返回一個msg標籤.Edit_Data函數接收返回的msg標籤.根據msg標籤的內容來判斷資料修改的情況.跟上一篇的"ajax添加資料"教程中的 Add_Data函數也基本相同.如有不明白之處.請參考上篇的ajax添加資料教程.我重點講一下Edit_Data函數中是如何將修改後的內容即時顯示到表格的!從msg=xmlData.getElementsByTagName("msg")開始講起.首先if判斷msg是否存在.如果已取得msg標籤.便根據msg標籤中的內容來判斷服務端的修改結果. msg內容為0代表資料被成功修改,這時我們在最上層顯示資料的表格內找到你輸入編號的那一行.然後把你輸入的修改資料寫入到該行的第二列中去.此時我們並沒有重複讀取資料庫中的資料!如有疑惑之處請參照上一篇的教程.

下面是服務端的Edit_Data.Asp檔案的源碼: 複製代碼 代碼如下:<!--#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 "edit" '如果為edit則執行修改資料操作
Call Edit_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 * From edit_table" '開啟資料庫中名字為web_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 Edit_Data
On Error Resume Next '忽略錯誤
OpenConn '開啟資料庫連結
id = Trim(Request.Form("id")) '接收用戶端傳過來的id資料編號
Sql = "Select * From edit_table Where id="&id
Set Rs=Conn.Execute(Sql)
If Rs.Eof then
xml = xml&"<msg>4</msg>"
Exit Sub
End If
content = Trim(Request.Form("content")) '接收修改後的內容
If id = "" Or content = "" Then '如果id或content有一項為空白,返回3
xml = xml&"<msg>3</msg>"
Exit Sub '退出過程
End If
Sql = "Update edit_table Set content='"&content&"' Where id="&id
Conn.Execute(Sql) '執行修改資料的sql語句

If Err.Number = 0 Then '如果沒有錯誤發生
xml = xml&"<msg>0</msg>" '添加一個msg標籤,內容為0

Exit Sub '退出過程
Else '如果有錯誤發生
xml = xml&"<msg>1</msg>" '如果有錯誤發生,添加msg標籤,內容為1
Exit Sub '退出過程
End If
End Sub
%>

該asp的源碼中使用的資料庫表是:edit_table 欄位分別為:id,content. 表中有5條資料分別是:html,css,dom,javascript,ajax.該源碼的知識在上一篇ajax教程有詳細解釋!
友情提醒:該ajax教程是系列性的.為減少篇幅.我們不會在每一篇教程中重複講解學習過的內容.如果你是初學者,請從ajax開始準備篇.逐一學習!謝謝合作!
下一篇我們講:"ajax添加與刪除篇"
本文著作權歸:Web圈 首發地址:http://Www.Web666.Net

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.