婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > Ajax修改數(shù)據(jù)即時顯示篇實(shí)現(xiàn)代碼

Ajax修改數(shù)據(jù)即時顯示篇實(shí)現(xiàn)代碼

熱門標(biāo)簽:接聽電話機(jī)器人哪有 莆田防封電銷卡價格 電銷機(jī)器人適用范圍 廣西ai語音電銷機(jī)器人哪家好 信貸電銷機(jī)器人有用嗎 察縣地圖標(biāo)注 蓄意標(biāo)記地圖標(biāo)注 如何用地圖標(biāo)注各分公司 辦理一個400電話多少錢
我們這次要請求的服務(wù)端網(wǎng)頁是:Edit_Data.Asp 待會我會在本次ajax教程中提供該asp文件的源碼.
其實(shí)在你學(xué)會了怎么使用ajax添加數(shù)據(jù)時,想實(shí)現(xiàn)修改數(shù)據(jù)對你來說已經(jīng)很容易了!費(fèi)話不說先看前端的JavaScript代碼和本次的ajax實(shí)例效果!

復(fù)制代碼 代碼如下:

html>
head>
title>ajax修改數(shù)據(jù)/title>
style>
body{
font-size:12px;
}
/style>
/head>
body>
p>同時在線測試的人很多,有時可能會出現(xiàn)并發(fā)修改現(xiàn)象./p>
hr/>
table border="1">
thead>tr>td>數(shù)據(jù)編號/td>td>數(shù)據(jù)內(nèi)容/td>/tr>/thead>
tbody id="a">!--用于存放內(nèi)容的tbody-->
/tbody>
/table>

輸入編號:input id="data_id" type="text" />br/>
修改內(nèi)容: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中創(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; imsXmlhttp.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對象賦值給一個變量.
ajax.open("post","Edit_Data.asp?action=read",true);//設(shè)置請求方式,請求的網(wǎng)頁,url的action參數(shù)為read,異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState == 4){//數(shù)據(jù)返回成功
if(ajax.status == 200){//http請求狀態(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ù)的表格
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;//在單元格內(nèi)寫入第i個list的第k個子元素中的文本內(nèi)容
}
}
}
}
}
}
ajax.send(null);//提交請求,參數(shù)為null
}
window.load = Read();

//修改數(shù)據(jù)的函數(shù)
function Edit_Data(){
var msgaes = document.getElementById("msgaes");//用來顯示一些當(dāng)前操作信息
var id = document.getElementById("data_id");//獲取要修改的數(shù)據(jù)編號
var content = document.getElementById("data_content");//獲取修改后的內(nèi)容
if(id.value.length == 0 || content.value.length == 0){
msgaes.innerHTML = "編號或內(nèi)容不許為空!";
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 = "修改數(shù)據(jù)成功!";
var a = document.getElementById("a");
for(var i=0;ia.rows.length;i++){//遍歷表格的每一列.這個方法有點(diǎn)笨
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 = "服務(wù)端寫入數(shù)據(jù)時發(fā)生錯誤!";
break;
case "3": msgaes.innerHTML = "請正確填寫要修改的數(shù)據(jù)編號和修改內(nèi)容!";
break;
case "4": msgaes.innerHTML = "數(shù)據(jù)庫中不存在你輸入的數(shù)據(jù)編號,請重新輸入!";
break;
default: msgaes.innerHTML = "發(fā)生未知錯誤!請聯(lián)系作者:QQ30458885";
break;
}
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//
ajax.send(param);
}
/script>
/body>
/html>


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

1、alax_xmlhttp():用來創(chuàng)建一個可用得XMLHTTPRequest對象,如果你還不知道什么是XMLHTTPRequest,請參考:XMLHTTPRequest對象詳解
2、Read():讀取數(shù)據(jù)函數(shù),用來讀取服務(wù)端數(shù)據(jù)庫中已存在的數(shù)據(jù).該函數(shù)與前幾篇的讀取數(shù)據(jù)函數(shù)基本上差不多.我不再重復(fù)講解相同之處.如不明白.請參閱前幾篇ajax系列教程!只是在返回xml數(shù)據(jù)以后的解析中略有不同.先看下服務(wù)端讀取數(shù)據(jù)的格式: Edit_Data.Asp?action=read. 在服務(wù)端輸出的xml數(shù)據(jù)中有5個list標(biāo)簽.這代表數(shù)據(jù)庫中有5條數(shù)據(jù).而每個list的標(biāo)簽下面包含著id和content兩個子元素.這正是數(shù)據(jù)庫中的每條數(shù)據(jù)的內(nèi)容. id字段和content字段.明白了這些.我們來講Read函數(shù)的是如何解析這些返回的xml數(shù)據(jù)的.從list=xmlData.getElementsBytagName("list")的開始講起,首先使用if來判斷這些list標(biāo)簽是否被成功獲取,如果是,則獲取我們顯示數(shù)據(jù)的表格.然后使用for遍歷 這些list.每循環(huán)一個list的就為我們要顯示數(shù)據(jù)的表格增加一行,因?yàn)槊總€list的內(nèi)含著一條數(shù)據(jù)內(nèi)容.而我們的表格每一行要顯示一條數(shù)據(jù).那么每一行創(chuàng)建完以后.我們再使用一個for來遍歷當(dāng)前l(fā)ist的子元素.每遍歷一個子元素便為該行增加一列.然后再 為該列寫入當(dāng)前l(fā)ist中的第k個子元素的文本內(nèi)容.第一列對應(yīng)id里的內(nèi)容,第二列對應(yīng)content里的內(nèi)容.如果你還不明白我再講什么.請惡補(bǔ)一下javascript的for循環(huán)!和涉及到的Dom相關(guān)指令.本站提供的Dom手冊有每個指令的詳細(xì)解釋!
3、Edit_Data():該函數(shù)用來提交你輸入的數(shù)據(jù)編號和要修改的數(shù)據(jù)內(nèi)容.只要數(shù)據(jù)被成功提交以后.無論發(fā)生什么事情.服務(wù)端都會返回一個msg標(biāo)簽.Edit_Data函數(shù)接收返回的msg標(biāo)簽.根據(jù)msg標(biāo)簽的內(nèi)容來判斷數(shù)據(jù)修改的情況.跟上一篇的"ajax添加數(shù)據(jù)"教程中的 Add_Data函數(shù)也基本相同.如有不明白之處.請參考上篇的ajax添加數(shù)據(jù)教程.我重點(diǎn)講一下Edit_Data函數(shù)中是如何將修改后的內(nèi)容即時顯示到表格的!從msg=xmlData.getElementsByTagName("msg")開始講起.首先if判斷msg是否存在.如果已取得msg標(biāo)簽.便根據(jù)msg標(biāo)簽中的內(nèi)容來判斷服務(wù)端的修改結(jié)果. msg內(nèi)容為0代表數(shù)據(jù)被成功修改,這時我們在前端顯示數(shù)據(jù)的表格內(nèi)找到你輸入編號的那一行.然后把你輸入的修改數(shù)據(jù)寫入到該行的第二列中去.此時我們并沒有重復(fù)讀取數(shù)據(jù)庫中的數(shù)據(jù)!如有疑惑之處請參照上一篇的教程.

下面是服務(wù)端的Edit_Data.Asp文件的源碼:
復(fù)制代碼 代碼如下:

!--#include file="Conn.Asp"-->
%
'出自:http://Www.Web666.Net
'作者:康董
'如需轉(zhuǎn)載請務(wù)必保留以上信息
'定義一個變量,來保存xml數(shù)據(jù)
xml="?xml version='1.0' encoding='gb2312'?>body>"
action=Request.QueryString("action") '使用get方式接受一個action來判斷客戶端想要執(zhí)行什么操作
Select case action
case "read" '如果為read則執(zhí)行讀取數(shù)據(jù)的操作
Call Read
case "edit" '如果為edit則執(zhí)行修改數(shù)據(jù)操作
Call Edit_Data
case else
xml = xml"msg>請求參數(shù)錯誤,請不要試圖非法操作!/msg>"
End Select
xml=xml"/body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End

Sub Read '定義一個讀取數(shù)據(jù)的過程
Call OpenConn '打開數(shù)據(jù)庫鏈接
Sql = "Select * From edit_table" '打開數(shù)據(jù)庫中名字為web_table的表
Set Rs = Conn.Execute(Sql) '執(zhí)行Sql語句,并將sql的索引賦值給rs變量

While Not Rs.Eof '如果表中有數(shù)據(jù).則一直循環(huán)讀取
xml = xml"list>" '每讀取一條數(shù)據(jù)則創(chuàng)建一個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ù)庫中沒有了數(shù)據(jù).則結(jié)束循環(huán)
Close_Conn '關(guān)閉數(shù)據(jù)庫鏈接
End Sub

Sub Edit_Data
On Error Resume Next '忽略錯誤
OpenConn '打開數(shù)據(jù)庫鏈接
id = Trim(Request.Form("id")) '接收客戶端傳過來的id數(shù)據(jù)編號
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")) '接收修改后的內(nèi)容
If id = "" Or content = "" Then '如果id或content有一項(xiàng)為空,返回3
xml = xml"msg>3/msg>"
Exit Sub '退出過程
End If
Sql = "Update edit_table Set content='"content"' Where id="id
Conn.Execute(Sql) '執(zhí)行修改數(shù)據(jù)的sql語句

If Err.Number = 0 Then '如果沒有錯誤發(fā)生
xml = xml"msg>0/msg>" '添加一個msg標(biāo)簽,內(nèi)容為0

Exit Sub '退出過程
Else '如果有錯誤發(fā)生
xml = xml"msg>1/msg>" '如果有錯誤發(fā)生,添加msg標(biāo)簽,內(nèi)容為1
Exit Sub '退出過程
End If
End Sub
%>

該asp的源碼中使用的數(shù)據(jù)庫表是:edit_table 字段分別為:id,content. 表中有5條數(shù)據(jù)分別是:html,css,dom,javascript,ajax.該源碼的知識在上一篇ajax教程有詳細(xì)解釋!
友情提醒:該ajax教程是系列性的.為減少篇幅.我們不會在每一篇教程中重復(fù)講解學(xué)習(xí)過的內(nèi)容.如果你是初學(xué)者,請從ajax開始準(zhǔn)備篇.逐一學(xué)習(xí)!謝謝合作!
下一篇我們講:"ajax添加與刪除篇"
本文版權(quán)歸:Web圈 首發(fā)地址:http://Www.Web666.Net
您可能感興趣的文章:
  • AJAX 自學(xué)練習(xí) 無刷新提交并修改數(shù)據(jù)庫數(shù)據(jù)并顯示
  • 用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
  • jquery ajax修改全局變量示例代碼
  • Ajax修改購物車示例
  • jquery formValidator插件ajax驗(yàn)證 內(nèi)容不做任何修改再離開提示錯誤的bug解決方法
  • jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法
  • php通過ajax實(shí)現(xiàn)雙擊table修改內(nèi)容
  • jquery ajax雙擊div可直接修改div中的內(nèi)容
  • jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的思路
  • ajax實(shí)現(xiàn)修改功能

標(biāo)簽:儋州 銅陵 鷹潭 張掖 延邊 阿拉善盟 益陽

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax修改數(shù)據(jù)即時顯示篇實(shí)現(xiàn)代碼》,本文關(guān)鍵詞  Ajax,修改,數(shù)據(jù),即時,顯示,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Ajax修改數(shù)據(jù)即時顯示篇實(shí)現(xiàn)代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于Ajax修改數(shù)據(jù)即時顯示篇實(shí)現(xiàn)代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    岛国精品一区二区| 亚洲精品欧美激情| 国产精品每日更新在线播放网址 | 精品国产人成亚洲区| 无码av中文一区二区三区桃花岛| 日本大香伊一区二区三区| 亚洲成av人片一区二区| 不卡在线视频中文字幕| 国产精品成人午夜| 在线观看免费亚洲| 亚洲午夜影视影院在线观看| 欧美日韩久久久久久| 亚洲3atv精品一区二区三区| 欧美综合一区二区三区| 一区二区三国产精华液| 色综合久久久久综合体| 日一区二区三区| 国产视频视频一区| 精品一区二区三区在线视频| 欧美草草影院在线视频| 国产麻豆精品一区二区| 国产精品福利一区二区三区| 成人丝袜18视频在线观看| 久久久一区二区| 色婷婷狠狠综合| 天堂一区二区在线| 精品人伦一区二区色婷婷| 不卡的av中国片| 综合色天天鬼久久鬼色| 91精品国产免费| 9i在线看片成人免费| 午夜精品国产更新| 国产欧美日韩视频一区二区| 欧美自拍偷拍午夜视频| 麻豆精品在线观看| 国产精品久久久久久久久动漫| 欧美系列一区二区| 国产成人综合自拍| 亚洲一区影音先锋| 国产调教视频一区| 日韩欧美一区中文| 欧美在线一二三| 成人一道本在线| 久久99精品久久久久久久久久久久 | 欧美吻胸吃奶大尺度电影| 国产米奇在线777精品观看| 一区二区高清在线| 中文字幕第一区| 精品国产1区二区| 666欧美在线视频| 欧美影院精品一区| 日本道色综合久久| 色婷婷综合五月| 粉嫩av一区二区三区| 国产在线观看免费一区| 青青草国产成人av片免费| 亚洲小说欧美激情另类| 国产精品女主播在线观看| 久久亚洲捆绑美女| 久久亚洲捆绑美女| 精品国产一区二区精华| 91精品一区二区三区在线观看| 在线精品视频免费播放| 99国产精品久久久久久久久久 | 午夜精品久久久久| 亚洲精品videosex极品| 亚洲激情六月丁香| 亚洲男女一区二区三区| 亚洲欧美自拍偷拍| 精品日韩欧美在线| 久久免费午夜影院| 精品处破学生在线二十三| 日韩一级高清毛片| 在线不卡欧美精品一区二区三区| 成人在线视频首页| av电影天堂一区二区在线| 色狠狠一区二区| 欧美中文字幕一区二区三区| 欧美喷潮久久久xxxxx| 在线综合+亚洲+欧美中文字幕| 91精品国产综合久久福利| 欧美v国产在线一区二区三区| 久久综合久久综合亚洲| 国产精品黄色在线观看| 夜夜嗨av一区二区三区网页 | 婷婷亚洲久悠悠色悠在线播放| 天堂蜜桃一区二区三区| 国产一区不卡在线| 9久草视频在线视频精品| 欧美在线你懂得| 欧美不卡一区二区三区| 中文字幕一区在线观看视频| 一区二区在线免费观看| 蜜桃精品视频在线观看| 丰满少妇在线播放bd日韩电影| 色综合久久综合网欧美综合网 | 色婷婷激情一区二区三区| 91精品综合久久久久久| 久久蜜桃香蕉精品一区二区三区| 日本一区二区免费在线| 亚洲高清一区二区三区| 国产乱色国产精品免费视频| 一本久久a久久免费精品不卡| 欧美一区二区在线看| 国产精品成人免费| 久久国产精品无码网站| 91老师片黄在线观看| 日韩欧美一区二区不卡| 国产精品久久久久精k8| 蜜乳av一区二区| 色欧美88888久久久久久影院| 精品女同一区二区| 亚洲视频一区二区在线| 国产iv一区二区三区| 欧美美女一区二区在线观看| 国产精品久久久久久久久免费丝袜| 性久久久久久久久久久久| proumb性欧美在线观看| 26uuu色噜噜精品一区| 日本欧美在线看| 色婷婷av一区二区三区gif | 欧美成人猛片aaaaaaa| 亚洲一区二区在线视频| 国产寡妇亲子伦一区二区| 欧美一区二区私人影院日本| 亚洲成人一区二区在线观看| 99免费精品视频| 久久久精品免费网站| 免费成人结看片| 欧美日韩国产小视频在线观看| 综合色中文字幕| 99国产精品久久| 中文字幕精品在线不卡| 国产成人综合网站| 国产欧美视频在线观看| 国产乱妇无码大片在线观看| 欧美精品一区二区三区一线天视频 | 成人综合在线观看| 精品理论电影在线| 久久99久久精品| 日韩欧美黄色影院| 久久国产精品免费| 久久免费午夜影院| 成人h动漫精品| 一区二区三区精品| 欧美性受xxxx黑人xyx| 亚洲国产欧美在线| 欧美精品123区| 美女网站色91| 欧美国产97人人爽人人喊| 成年人国产精品| 亚洲最新在线观看| 欧美日韩高清不卡| 久久国产成人午夜av影院| 精品福利二区三区| 99久久精品免费精品国产| 亚洲最色的网站| 日韩欧美亚洲一区二区| 成人午夜电影网站| 奇米影视一区二区三区| 欧美成人一区二区| av在线不卡网| 亚洲444eee在线观看| 日韩免费电影一区| 不卡区在线中文字幕| 亚洲一区二区美女| 亚洲精品一区在线观看| 99re热视频这里只精品| 日韩黄色在线观看| 欧美国产激情二区三区 | 91麻豆精品国产91久久久资源速度| 天堂成人国产精品一区| 精品国产百合女同互慰| 91美女片黄在线观看| 蜜桃久久久久久| 亚洲色图都市小说| 欧美性猛片aaaaaaa做受| 精品一区二区三区免费视频| 中文幕一区二区三区久久蜜桃| 91一区二区在线观看| 日韩国产成人精品| 国产精品免费视频一区| 色偷偷一区二区三区| 国内精品视频一区二区三区八戒| 亚洲欧美电影院| 欧美精品一区二区在线播放| 欧美性感一区二区三区| 国产成人综合在线观看| 久久国产尿小便嘘嘘尿| 亚洲成精国产精品女| 亚洲国产高清在线| 日韩三区在线观看| 色www精品视频在线观看| 国产福利91精品一区| 日韩精品欧美成人高清一区二区| 中日韩免费视频中文字幕| 91精品国产综合久久福利| 欧美吞精做爰啪啪高潮| 91一区一区三区| caoporen国产精品视频|