ajax.asp
<%
dim conn,rs
dim connstr
dim sqlcmd'建立資料庫教程連線物件並開啟
set conn=server.createobject("adodb.connection")
connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("guestbook.mdb")
conn.open connstr
'用於從資料庫中擷取資料的sql語句
sqlcmd="select title,author,date,content from data order by date desc"
'建立資料集對象
set rs=server.createobject("adodb.recordset")
'從資料庫中擷取資料
rs.open sqlcmd,conn,1,1%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>ajax guestbook</title>
<style type="text/css教程">
<!--
body { font-size:0.75em;text-align:center;}
dl { margin:0;}
dt { background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd { margin:3px;}
div { margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
#postbox { margin-top:10px;}
dd.button { text-align:center;}
dd.button input { margin:0 20px;}
//-->
</style><script type="text/網頁特效">
<!--
//將使用者輸入非同步提交到伺服器
function ajaxsubmit(){
//擷取使用者輸入
var title=document.forms[0].title.value;
var author=document.forms[0].author.value;
var content=document.forms[0].content.value;
//建立xmlhttprequest對象
var xmlhttp;
try{
xmlhttp=new xmlhttprequest();
}catch(e){
xmlhttp=new activexobject("microsoft.xmlhttp");
}
//建立請求結果處理常式
xmlhttp.onreadystatechange=function(){
if (4==xmlhttp.readystate){
if (200==xmlhttp.status){
var date=xmlhttp.responsetext;
addtolist(date);
}else{
alert("error");
}
}
}
//開啟串連，true表示非同步提交
xmlhttp.open("post", "ajaxadd.asp", true);
//當方法為post時需要如下設定http頭
xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded');
//發送資料
xmlhttp.send("title="+escape(title)+"&author="+escape(author)+"&content="+escape(content));
}//將使用者輸入顯示到頁面
function addtolist(date){
//擷取留言列表div容器
var msg=document.getelementbyid("msglist");
//建立dl標記及其子標記
var dl=document.createelement("dl");
var dt=document.createelement("dt");
var dd=document.createelement("dd");
var dd2=document.createelement("dd");
//將結點插入到相應的位置
msg.insertbefore(dl,msg.firstchild);
dl.appendchild(dt);
dl.appendchild(dd);
dl.appendchild(dd2);
//填充留言內容
dt.innerhtml="標題："+document.forms[0].title.value;
dd.innerhtml="作者："+document.forms[0].author.value+" 日期："+date;
dd2.innerhtml=document.forms[0].content.value;
//清空使用者輸入框
document.forms[0].title.value="";
document.forms[0].author.value="";
document.forms[0].content.value="";
}
//-->
</script>
</head><body>
<div id="msglist">
<%
'遍曆記錄集產生html代碼，從而將資料顯示於頁面
while not rs.eof
%>
<dl>
<dt>標題：<%=rs("title")%></dt>
<dd>作者：<%=rs("author")%> 日期：<%=rs("date")%></dd>
<dd><%=rs("content")%></dd>
</dl>
<%
rs.movenext
wend
'關閉資料庫連接及記錄集，釋放資源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</div>
<div id="postbox">
<form name="theform" method="post">
<dl>
<dt>發表您的留言</dt>
<dd>標題：<input type="text" maxlength="150" size="45" name="title"/></dd>
<dd>作者：<input type="text" maxlength="50" size="45" name="author"/></dd>
<dd>內容：<textarea rows="10" cols="45" name="content"></textarea></dd>
<dd class="button">
<input type="button" onclick="ajaxsubmit()" value="提交"/>
<input type="reset" value="重填"/>
</dd>
</dl>
</form>
</div>
</body>
</html>
儲存由ajax發送過來的資料進行儲存
<%
dim conn,rs
dim connstr
dim sqlcmd'建立資料庫連接對象並開啟
set conn=server.createobject("adodb.connection")
connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("guestbook.mdb")
conn.open connstr'將提交的資料加入資料庫
sqlcmd="insert into data(title,author,content) values('" & request.form("title") & "','" & request.form("author") & "','" & request.form("content") & "')"
conn.execute(sqlcmd)'返回伺服器時間
response.write(date)
%>
顯示留言記錄，並且下面提供留方輸入框
<%
dim conn,rs
dim connstr
dim sqlcmd
'建立資料庫連接對象並開啟
set conn=server.createobject("adodb.connection")
connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("guestbook.mdb")
conn.open connstr
'用於從資料庫中擷取資料的sql語句
sqlcmd="select title,author,date,content from data order by date desc"
'建立資料集對象
set rs=server.createobject("adodb.recordset")if request.form("title")<>"" then
'如果是頁面提交資料則將提交的資料加入資料庫
rs.open sqlcmd,conn,1,3
rs.addnew
rs("title")=request.form("title")
rs("author")=request.form("author")
rs("content")=request.form("content")
rs.update
else
'否則直接從資料庫中擷取資料
rs.open sqlcmd,conn,1,1
end if
%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>classic guestbook</title>
<style type="text/css">
<!--
body { font-size:0.75em;text-align:center;}
dl { margin:0;}
dt { background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd { margin:3px;}
div { margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
#postbox { margin-top:10px;}
dd.button { text-align:center;}
dd.button input { margin:0 20px;}
//-->
</style>
</head><body>
<div id="msglist">
<%
'遍曆記錄集產生html代碼，從而將資料顯示於頁面
while not rs.eof
%>
<dl>
<dt>標題：<%=rs("title")%></dt>
<dd>作者：<%=rs("author")%> 日期：<%=rs("date")%></dd>
<dd><%=rs("content")%></dd>
</dl>
<%
rs.movenext
wend
'關閉資料庫連接及記錄集，釋放資源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</div>
<div id="postbox">
<form action="classic.asp" method="post">
<dl>
<dt>發表您的留言</dt>
<dd>標題：<input type="text" maxlength="150" size="45" name="title"/></dd>
<dd>作者：<input type="text" maxlength="50" size="45" name="author"/></dd>
<dd>內容：<textarea rows="10" cols="45" name="content"></textarea></dd>
<dd class="button">
<input type="submit" value="提交"/>
<input type="reset" value="重填"/>
</dd>
</dl>
</form>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
