我們這次要請求的服務端網頁是：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; imsXmlhttp.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;ilist.length;i++){
var tr = t.insertRow();//有幾個list就為表格增加幾行．
for(var k=0;klist[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;ia.rows.length;i++){//遍歷表格的每一列．這個方法有點笨
for(var k=0;ka.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
您可能感興趣的文章:- AJAX 自學練習 無刷新提交并修改數據庫數據并顯示
- 用Jquery實現可編輯表格并用AJAX提交到服務器修改數據
- jquery ajax修改全局變量示例代碼
- Ajax修改購物車示例
- jquery formValidator插件ajax驗證 內容不做任何修改再離開提示錯誤的bug解決方法
- jQuery+ajax實現鼠標單擊修改內容的方法
- php通過ajax實現雙擊table修改內容
- jquery ajax雙擊div可直接修改div中的內容
- jQuery+ajax實現鼠標單擊修改內容的思路
- ajax實現修改功能
