Ajax添加数据即时显示信息篇

2019-09-14 07:16:05于海丽


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中的内容了.也就是你在文本框中输入的. 讲到这里应该是时候看一下这个被请求的服务端网页了.看看他到底在服务端干了些什么.请看:

<!--#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 "add" '如果为add则执行添加数据的操作
Call Add_Data
case else
xml = xml&"<msg>请求参数错误,请不要试图非法操作!</msg>"
End Select

xml=xml&"</body>"
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>" '没开始读取之前先建立一个list标签.将所有数据都包含在该标签下