今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处.
1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用Web_ajax.Asp文件.新的请求网页是:Add_Data.Asp.看后缀大家就应该能明白.我在服务端采用的技术是Asp.都说Asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码.我会在该次教程最后提供该Asp的源码给大家!
下面我们先来看下前端的代码.和本次的ajax实例效果演示

 
 
ajax无刷新添加数据 
输入内容: 

点击上面的查看实例效果,就是我们今天要学习的目的.上面的代码只是前端的html代码.在代码里有3个自定义函数.


1、ajax_xmlhttp();该函数我们在前面的教程已经讲过,是用来创建一个可用性的XMLHTTPRequest对象,如果你还不了解,请参阅:ajax开始准备篇

2、Post();该函数还是用来读取数据.我们在本章教程中不再解释ajax是如何读取数据的.你可以参阅:ajax初试读取数据篇与ajax读取数据到表格 不过跟前2篇不同的是.该Post函数不是在点击 按扭时被触发.而是在你第一次打开网页或刷新页面的时候才会执行该函数.其目的是用来读取数据库中已存在的数据.在数据添加成功以后.并没有运行该函数.其中的秘密下面的解释中我会告诉你!另外你再看一下open方法中的设置.我们在请求的网址后面多了一个action=read,这个大家应该用过.在url后面的参数, 服务端可以接收该参数.在Asp中使用Request.QueryString来接收.Php中使用$get方法来接收.我们设置这个url的参数目的是想要告诉服务器.我们要执行什么动作.在Add_Data.Asp网页中有两个自定义过程,一个用来读取数据,一个用来添加数据.这个action=read参数服务端接收以后.经过判断会执行读取数据的过程!

3、我们重点来讲一下这个add_Post函数.函数刚开始便使用getElementById方法在网页查找msg与str.msg是用来显示一些当前的操作信息.str是用来获取你输入的内容.然后判断你是否在str的文本框中输入了内容.如果为空则退出函数.
再看open方法的设置.请求的网页url后面的参数是action=add,服务端网页接收action这个参数.经过判断如果值是add,则执行插入数据的过程.

var param = "str=" escape(str.value);将str文本框的内容等于一个str,然后一并赋值给param变量.待会发送请求时.send会提交这个param变量中的内容.escape的意思是对 String 对象编码以便它们能在所有计算机上可读,就是解码你输入的内容.经过测试有时候可以忽略,但有时候会出现乱码.为保险起见我们还是使用escape

我们先不讲readystatechange指定的程序.看下面:
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");这行的意思是.我要向服务端提交表单内容.当你的请求方式是post,并且有数据向服务端提交时.必须设置setRequestHeader.如果你使用的请求方式是get或者没有数据要提交则可以忽略该句.

ajax.send(param);发送请求.并在send的参数里指定要提交param变量中的内容.你可以alert一下param,会弹出str="你输入的内容",然后我们在服务端的网页接收这个str,便可以获取str中的内容了.也就是你在文本框中输入的. 讲到这里应该是时候看一下这个被请求的服务端网页了.看看他到底在服务端干了些什么.请看:
 
" 
action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作 
Select case action 
case "read" '如果为read则执行读取数据的操作 
Call Read 
case "add" '如果为add则执行添加数据的操作 
Call Add_Data 
case else 
xml = xml&"请求参数错误,请不要试图非法操作!" 
End Select 

xml=xml&"" 
Response.Clear 
Response.ContentType="text/xml" 
Response.CharSet="gb2312" 
Response.write xml '注意这句啊.上面的那些判断执行过程.其目的就是获取一个新的xml变量内容.然后在这里输出这个xml 
Response.End 

Sub Read '定义一个读取数据的过程 
Call OpenConn '打开数据库链接 
Sql = "Select * From web_table" '打开数据库中名字为web_table的表 
Set Rs = Conn.Execute(Sql) '执行Sql语句,并将sql的索引赋值给rs变量 
xml = xml&"" '没开始读取之前先建立一个list标签.将所有数据都包含在该标签下 
While Not Rs.Eof '如果表中有数据.则一直循环读取 
xml = xml&"
  • "&Rs("web")&"
  • " Rs.MoveNext '执行下一条数据的读取 Wend '如果数据库中没有了数据.则结束循环 xml = xml&"
    " '数据读完闭合list标签 Close_Conn '关闭数据库链接 End Sub Sub Add_Data '添加数据过程 On Error Resume Next '如果发生错误继续执行程序 OpenConn '打开数据库链接 str = Trim(Request.Form("str")) '接收客户端传过来的str内容 If str = "" Then xml = xml&"3" '如果提交的内容为空.返回3 Exit Sub '退出过程 End If Sql = "Insert Into web_table (web) values ('"&str&"')" Conn.Execute(Sql) '执行添加数据 If Err.Number = 0 Then '判断是否有错误发生, xml = xml&"0" '如果没有错误发生,则证明数据已经成功.返回0 Exit Sub Else xml = xml&"1" '如果发生错误.则证明有错误发生.数据很可能添加失败 Exit Sub End If End Sub %>

    上面是你使用ajax请求的服务端网页:Add_Data.Asp的源码.现在使用Asp的应该不多了吧?但我依然痴情于她.无论你用的服务端技术是Php,.Net,或者Jsp等.经过我的解释你应该很容易的会模拟出这个源码的功能.
    1:include file="Conn.asp"在Asp里的作用是引入一个网页.Conn.asp是我的数据库链接文件.为安全起见.我就不暴露数据库名称了.你自己建个库.随便起个名进行测试吧.
    2:定义一个名字为xml变量.将xml格式的数据保存在这个变量中.使用Response.Write输出xml变量中的内容.
    3:接收你在前端url传过来的action参数.并判断action的值.Select case不用解释了吧.多支判断.如果action的值是read,则执行Read过程.如果是add则执行Add_Data过程.如果两者都不是则证明不是通过正常渠道进行请求的. 向xml变量中再增加一个msg标签.输出以后会给出显示的内容
    4:Response.Clear清除缓存.
    5:Response.ContentType="text/xml"定义输出的文本格式.xml类型
    6:Response.CharSet="gb2312"输出编码,中文编码.
    7:Response.write xml向客户端输出xml变量中的数据.该变量保存的是xml格式的数据.
    8:Response.End停止一切输出.
    9:定义一个 Read 过程.用来读取数据库test_table表中的web字段内的数据.打开数据库,sql语句.执行sql.开始读取!这些知识我就不讲了.如果你还不会.我想你应该去学习一下操作数据库的知识!我重点讲一下该Read过程的 意义.在读取数据之前先为xml变量中增加了一个list的标签.然后将所有的数据都读取到list标签内,每条数据又被包含在了一个li标签内.数取读取完毕.闭合list标签.我想说的是,这个Read过程并没有向客户端输出任何内容. 他的工作就是将数据库中的内容以xml的格式读取到那个xml变量中.当客户端action=add的时候.执行Read过程.Read过程给出一个新的xml变量.Response.Write xml输出这个变量到客户端,客户端接受到这个xml,我们在前端使用responseXML接收这个xml.然后显示!明白吗?不明白加我Q:30458885
    10:我们再来讲Add_Data这个过程.Add_Data的意义和Read是相同的.都是在执行一系列操作以后向xml变量中赋值.Add_Data的作用是接受客户端发送过来的数据.并将数据写到数据库内.你仔细看下Add_Data中的程序逻辑.首先他会判断你提交的数据是否为空.如果为空向xml变量中增加一个msg标签.内容是3.然后退出Add_Data. 如果数据不为空.则向数据库写入该数据.然后判断是否有错误发生.如果没有错误也向xml变量中增加一个msg标签,内容是0.代表在写入数据时一切正常.数据被成功添加.相反Err.Number不等于0.则代表在写入数据时发生了错误.数据没有被成功添加.这时也会向xml变量中添加一个msg标签.内容为1.这三种情况无论那种发生 都会在添加msg标签以后立即退出Add_Data.所以只有一个msg标签会被写入.那么我们马上回来客户端Add_Post中函数正是接收了这个msg标签以后.根据msg的内容来判断服务端究竟发生了什么事!如果msg的内容为0,证明服务端一切正常,没有错误发生.数据已被添加到数据库.我们直接使用Dom将str中的内容写入到了表格内.并没有 执行读取数据的Post函数.如果msg内容为3,证明你输入了空的内容.如果msg内容为1,证明服务端有错误发生.数据写入失败!
    怎么样你学会使用ajax技术向数据库添加数据了吗?不要说No!拜托我讲的很辛苦......
    下一篇我们讲:ajax修改数据即时显示篇

    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受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

    返回
    顶部