利用xmlhttp無刷新添加數據之get篇.
我們傳統(tǒng)的提交數據的方法都是用<form>來實現的.
<form>標記中的method屬性確定了表單元素的數據在發(fā)送到服務器時,
如何對http請求信息進行打包.
method 屬性可以使用的方法
method屬性 發(fā)送表單元素的方式 讀取數據的request集合
get 標識在url的最后 querystring
post 在http請求的主體內(http請求的自由區(qū)域) 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,字符串,發(fā)送條件.
* 參數:susername,字符串,發(fā)送條件.
* 實例: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));
%>
|||xmlhttp來實現form的method=post.
clientpost.htm
<script language="javascript">
function adddatapost(suserid,susername)
{
/*
*--------------- adddatapost(suserid,susername) -----------------
* adddatapost(suserid,susername)
* 功能:通過xmlhttp添加數據.相當于form的method=post.
* 參數:suserid,字符串,發(fā)送條件.
* 參數:susername,字符串,發(fā)送條件.
* 實例: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));
%>
數據庫設計
data.mdb
表users.
字段
id 自動編號
userid 文本
username 文本
表:users 數據:
id userid username
1 wanghr100 灰豆寶寶.net
