Ajax修改数据即时显示篇实现代码
程序员文章站
2022-03-31 14:03:21
我们这次要请求的服务端网页是：edit_data.asp 待会我会在本次ajax教程中提供该asp文件的源码． 其实在你学会了怎么使用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、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添加数据时，想实现修改数据对你来说已经很容易了！费话不说先看前端的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