Ajax 수정 데이터 인 스 턴 트 디 스 플레이 편 구현 코드

저희 가 이번에 요청 할 서버 홈 페이지 는: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,alaxxml.http():사용 가능 한 XML HTTP Request 대상 을 만 드 는 데 사 용 됩 니 다.XML HTTP Request 가 무엇 인지 모 르 신다 면 참고 하 십시오:XML HTTP Request 대상 상세 설명 2,Read():데이터 함수 읽 기,서버 데이터베이스 에 존재 하 는 데 이 터 를 읽 는 데 사 용 됩 니 다.이 함 수 는 앞의 몇 편의 읽 기 데이터 함수 와 거의 다 르 지 않 습 니 다.저 는 더 이상 같은 점 을 설명 하지 않 습 니 다.잘 모 르 겠 으 면 앞의 ajax 시리즈 튜 토리 얼 을 참조 하 십시오!xml 데 이 터 를 되 돌려 준 후 해석 이 약간 다 릅 니 다.먼저 서버 에서 데 이 터 를 읽 는 형식 을 보십시오:EditData.asp?action=read.서버 에서 출력 한 xml 데이터 에는 5 개의 list 태그 가 있 습 니 다.이것 은 데이터베이스 에 5 개의 데이터 가 있 음 을 의미 합 니 다.각 list 의 태그 아래 에는 id 와 content 두 개의 키 요소 가 포함 되 어 있 습 니 다.이것 은 바로 데이터베이스 에 있 는 모든 데이터 의 내용 입 니 다.id 필드 와 content 필드 입 니 다.이 를 알 겠 습 니 다.read 함 수 는 이 되 돌아 오 는 xml 데 이 터 를 어떻게 해석 하 는 지 알려 드 립 니 다.list=xmlData.getElement sBytagName("list")을 시작 으로 먼저 if 를 사용 하여 이 list 태그 가 성공 적 으로 가 져 왔 는 지 판단 합 니 다.그렇다면 데 이 터 를 표시 하 는 표를 가 져 옵 니 다.그리고 for 를 사용 하여 이 list 를 옮 겨 다 닙 니 다.하나의 list 를 순환 할 때마다 데 이 터 를 표시 할 표 에 한 줄 을 추가 합 니 다.모든 list 에는 하나의 데이터 내용 이 포함 되 어 있 기 때 문 입 니 다.표 의 모든 줄 에 하나의 데 이 터 를 표시 해 야 합 니 다.그러면 각 줄 이 생 성 된 후에 우 리 는 for 를 사용 하여 현재 list 의 하위 요 소 를 옮 겨 다 닙 니 다.각 하위 요 소 를 옮 겨 다 닐 때마다 이 줄 에 열 을 추가 합 니 다.그리고 이 열 에 현재 list 의 k 키 요소 의 텍스트 내용 을 기록 합 니 다.첫 번 째 열 은 id 에 대응 하 는 내용 입 니 다.두 번 째 열 은 콘 텐 츠 의 내용 에 대응 합 니 다.제 가 무슨 말 을 하 는 지 모 르 시 면 자바 script 의 for 순환 을 악 보 해 주세요!관련 된 Dom 관련 명령 입 니 다.본 사이트 에서 제공 하 는 Dom 매 뉴 얼 은 각 명령 에 대한 상세 한 설명 이 있 습 니 다!3、Edit_data():이 함 수 는 입력 한 데이터 번호 와 수정 할 데이터 내용 을 제출 하 는 데 사 용 됩 니 다.데이터 가 성공 적 으로 제출 되면 무슨 일이 있어 도 서버 에서 msg 탭 을 되 돌려 줍 니 다.EditData 함수 가 되 돌아 오 는 msg 탭 을 받 습 니 다.msg 탭 의 내용 에 따라 데이터 수정 상황 을 판단 합 니 다.이전'ajax 추가 데이터'튜 토리 얼 의 addData 함수 도 기본적으로 같 습 니 다.모 르 는 점 이 있 으 면 전편 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 입 니 다.표 에는 html,css,dom,javascript,ajax.이 소스 코드 에 대한 지식 이 이전 ajax 튜 토리 얼 에 상세 하 게 설명 되 어 있 습 니 다!우정 알림:이 ajax 튜 토리 얼 은 시리즈 적 입 니 다.지면 을 줄 이기 위해 서 입 니 다.우 리 는 모든 튜 토리 얼 에서 배 운 내용 을 반복 적 으로 설명 하지 않 습 니 다.만약 당신 이 초보 자 라면 ajax 부터 편 을 준비 하 세 요.하나씩 공부 하 세 요!협조 해 주 셔 서 감사합니다!다음 편 은"ajax 추가 및 삭제 편"이 라 고 말 합 니 다.본 고의 저작권 은 웹 권 의 첫 번 째 주소 입 니 다.http://Www.Web666.Net

좋은 웹페이지 즐겨찾기