我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码.
其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果!

 
 
ajax修改数据

同时在线测试的人很多,有时可能会出现并发修改现象.


数据编号 数据内容
输入编号:
修改内容:

我们来分析上面的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文件的源码:
 
" 
action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作 
Select case action 
case "read" '如果为read则执行读取数据的操作 
Call Read 
case "edit" '如果为edit则执行修改数据操作 
Call Edit_Data 
case else 
xml = xml&"请求参数错误,请不要试图非法操作!" 
End Select 
xml=xml&"" 
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标签 
xml = xml&""&Rs("id")&"" 'id字段内容 
xml = xml&""&Rs("content")&"" 'content字段内容 
xml = xml&"" '每读完一条数据,就闭合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&"4" 
Exit Sub 
End If 
content = Trim(Request.Form("content")) '接收修改后的内容 
If id = "" Or content = "" Then '如果id或content有一项为空,返回3 
xml = xml&"3" 
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&"0" '添加一个msg标签,内容为0 

Exit Sub '退出过程 
Else '如果有错误发生 
xml = xml&"1" '如果有错误发生,添加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修改数据即时显示篇实现代码的更多相关文章

  1. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  2. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  3. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  4. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

  5. ajax编写简单的登录页面

    这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  7. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下

  8. 使用AJAX完成用户名是否存在异步校验

    这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

  9. ajax实现无刷新省市县三级联动

    这篇文章主要为大家详细介绍了ajax实现无刷新省市县三级联动的相关资料,利用三层架构实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. jQuery Ajax 实现分页 kkpager插件实例代码

    本文通过实例代码给大家讲解了jQuery Ajax 实现分页 kkpager插件功能,需要的的朋友参考下吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部