当前位置:编程学习 > asp >>

基于Ajax asp的留言板示例源码

文章提供一款基于ajax asp教程的留言板示例源码哦,总共有三个文件,主要是讲ajax留言,以及显示留言记录分页的功能。

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>

补充:asp教程,高级应用
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,