繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用XMLHTTP无刷新添加数据
- Javascript
- 兼容firefox的文本框只能输入两位小数的数字的代码
- javascript 年月日联动实现核心代码
- JavaScript 图片预览效果 推荐
- JavaScript是否可实现多线程 深入理解JavaScript定时机制
- jquery 表单取值常用代码
- javaScript 删除确认实现方法小结
- javascript强制弹出新窗口实现代码
- Js倒计时代码，当鼠标离开页面与回到页面会自动停止与开始
- Div+Js实现的带阴影菜单 微软以前网站曾用过
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- JavaScript 未知高度元素垂直居中实现代码
- javascript 仿开心网好友印象功能(点击文字弹出印象框)
- JS+CSS实现的一种交互体验 表单页面
- js 效率组装字符串 StringBuffer
- window.js 主要包含了页面的一些操作
- 关于Aptana Studio生成自动备份文件的解决办法
- javascript下arguments,caller,callee,call,apply示例及理解
- HTA版JSMin（省略修饰语若干）基于javascript语言编写
- CSS+Jquery实现页面圆角框方法大全
- js 页面刷新location.reload和location.replace的区别小结
Javascript 中的 利用XMLHTTP无刷新添加数据
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 336 ::
收藏到网摘: n/a
利用XMLHTTP无刷新添加数据之Get篇.
我们传统的提交数据的方法都是用<Form>来实现的.
<Form>标记中的Method属性确定了表单元素的数据在发送到服务器时,
如何对HTTP请求信息进行打包.
Method 属性可以使用的方法
Method属性 发送表单元素的方式 读取数据的Request集合
Get 标识在URL的最后 QueryString
Post 在HTTP请求的主体内(HTTP请求的自由区域) Form
这篇文章用XMLHTTP来实现Form的Method=Get.
ClientGet.htm
<script language="JavaScript">
function AddDataGet(sUserId,sUserName)
{
/*
*--------------- AddDataGet(sUserId,sUserName) -----------------
* AddDataGet(sUserId,sUserName)
* 功能:通过XMLHTTP添加数据.相当于Form的Method=Get.
* 参数:sUserId,字符串,发送条件.
* 参数:sUserName,字符串,发送条件.
* 实例:AddDataGet(document.all.userid.value,document.all.username.value);
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-30 14:46
*--------------- AddDataGet(sUserId,sUserName) -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
//特殊字符：+,%,&,=,?等的传输解决办法.用escape编码.
//Update:2004-6-1 12:22
//escape(sUserId),escape(sUserName);
oBao.open("POST","Server.asp?userid="+escape(sUserId)+"&username="+escape(sUserName),false);
oBao.send();
//清空输入框数据.
document.all.userid.value="";
document.all.username.value="";
//服务器端处理返回的是经过escape编码的字符串.
alert(unescape(oBao.responseText))
}
</script>
<input type="button" onclick="AddDataGet(document.all.userid.value,document.all.username.value)" value="AddDataGet"><br>
userid:<input type="text" name="userid"><br>
username:<input type="text" name="username">
{
/*
*--------------- AddDataGet(sUserId,sUserName) -----------------
* AddDataGet(sUserId,sUserName)
* 功能:通过XMLHTTP添加数据.相当于Form的Method=Get.
* 参数:sUserId,字符串,发送条件.
* 参数:sUserName,字符串,发送条件.
* 实例:AddDataGet(document.all.userid.value,document.all.username.value);
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-30 14:46
*--------------- AddDataGet(sUserId,sUserName) -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
//特殊字符：+,%,&,=,?等的传输解决办法.用escape编码.
//Update:2004-6-1 12:22
//escape(sUserId),escape(sUserName);
oBao.open("POST","Server.asp?userid="+escape(sUserId)+"&username="+escape(sUserName),false);
oBao.send();
//清空输入框数据.
document.all.userid.value="";
document.all.username.value="";
//服务器端处理返回的是经过escape编码的字符串.
alert(unescape(oBao.responseText))
}
</script>
<input type="button" onclick="AddDataGet(document.all.userid.value,document.all.username.value)" value="AddDataGet"><br>
userid:<input type="text" name="userid"><br>
username:<input type="text" name="username">
Server.asp 服务器端处理.
<% @Language="JavaScript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var sResult = "";
var oConn = OpenDB("data.mdb");
//相当于Form的Method=Get.
//相当于Form的Method=Get.
//特殊字符：+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
//所以服用器端应该先用unescape解码.
//Update:2004-6-1 12:22
//unescape(Request.QueryString("userid")).....
var userid = unescape(Request.QueryString("userid"));
var username = unescape(Request.QueryString("username"));
sResult = "userid:"+userid+"\nusername:"+username+"\n 添加成功."
var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
oConn.Execute(sql);
Response.Write(escape(sResult));
%>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var sResult = "";
var oConn = OpenDB("data.mdb");
//相当于Form的Method=Get.
//相当于Form的Method=Get.
//特殊字符：+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
//所以服用器端应该先用unescape解码.
//Update:2004-6-1 12:22
//unescape(Request.QueryString("userid")).....
var userid = unescape(Request.QueryString("userid"));
var username = unescape(Request.QueryString("username"));
sResult = "userid:"+userid+"\nusername:"+username+"\n 添加成功."
var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
oConn.Execute(sql);
Response.Write(escape(sResult));
%>
XMLHTTP来实现Form的Method=Post.
ClientPost.htm
<script language="JavaScript">
function AddDataPost(sUserId,sUserName)
{
/*
*--------------- AddDataPost(sUserId,sUserName) -----------------
* AddDataPost(sUserId,sUserName)
* 功能:通过XMLHTTP添加数据.相当于Form的Method=Post.
* 参数:sUserId,字符串,发送条件.
* 参数:sUserName,字符串,发送条件.
* 实例:AddDataPost(document.all.userid.value,document.all.username.value);
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-30 14:46
*--------------- AddDataPost(sUserId,sUserName) -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
//特殊字符：+,%,&,=,?等的传输解决办法.
//Update:2004-6-1 12:22
//escape(sUserId),escape(sUserName);
sUserId = escape(sUserId);
sUserName = escape(sUserName);
var userInfo = "userid="+sUserId+"&username="+sUserName;
oBao.open("POST","Server.asp",false);
oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
oBao.send(userInfo);
//清空输入框数据.
document.all.userid.value="";
document.all.username.value="";
//服务器端处理返回的是经过escape编码的字符串.
alert(unescape(oBao.responseText))
}
</script>
<input type="button" onclick="AddDataPost(document.all.userid.value,document.all.username.value)" value="AddDataPost"><br>
userid:<input type="text" name="userid"><br>
username:<input type="text" name="username">
function AddDataPost(sUserId,sUserName)
{
/*
*--------------- AddDataPost(sUserId,sUserName) -----------------
* AddDataPost(sUserId,sUserName)
* 功能:通过XMLHTTP添加数据.相当于Form的Method=Post.
* 参数:sUserId,字符串,发送条件.
* 参数:sUserName,字符串,发送条件.
* 实例:AddDataPost(document.all.userid.value,document.all.username.value);
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-30 14:46
*--------------- AddDataPost(sUserId,sUserName) -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
//特殊字符：+,%,&,=,?等的传输解决办法.
//Update:2004-6-1 12:22
//escape(sUserId),escape(sUserName);
sUserId = escape(sUserId);
sUserName = escape(sUserName);
var userInfo = "userid="+sUserId+"&username="+sUserName;
oBao.open("POST","Server.asp",false);
oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
oBao.send(userInfo);
//清空输入框数据.
document.all.userid.value="";
document.all.username.value="";
//服务器端处理返回的是经过escape编码的字符串.
alert(unescape(oBao.responseText))
}
</script>
<input type="button" onclick="AddDataPost(document.all.userid.value,document.all.username.value)" value="AddDataPost"><br>
userid:<input type="text" name="userid"><br>
username:<input type="text" name="username">
Server.asp 服务器端处理.
<% @Language="JavaScript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var sResult = "";
var oConn = OpenDB("data.mdb");
//相当于Form的Method=Post.
//相当于Form的Method=Post.
//特殊字符：+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
//所以服用器端应该先unescape解码.
//Update:2004-6-1 12:22
//unescape(Request.Form("userid")).....
var userid = unescape(Request.Form("userid"));
var username = unescape(Request.Form("username"));
sResult = "userid:"+userid+"\nusername:"+username+"\n 添加成功."
var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
oConn.Execute(sql);
Response.Write(escape(sResult));
%>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var sResult = "";
var oConn = OpenDB("data.mdb");
//相当于Form的Method=Post.
//相当于Form的Method=Post.
//特殊字符：+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
//所以服用器端应该先unescape解码.
//Update:2004-6-1 12:22
//unescape(Request.Form("userid")).....
var userid = unescape(Request.Form("userid"));
var username = unescape(Request.Form("username"));
sResult = "userid:"+userid+"\nusername:"+username+"\n 添加成功."
var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
oConn.Execute(sql);
Response.Write(escape(sResult));
%>
数据库设计
data.mdb
表users.
字段
id 自动编号
userid 文本
username 文本
表:users 数据:
id userid username
1 wanghr100 灰豆宝宝.net
评论 (0) All
