Ajax GuestBook(ASP)实现_1

1、Access DataBase

id    自动编号 
title    文本类型,255
author    文本类型,30
date    日期,Date()
content   备注

2.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

sqlCmd = "select * from data order by date desc"

set rs = Server.CreateObject("adodb.RecordSet")

rs.open sqlCmd,conn,1,1
%>

<!DOTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Transition//EN">
<html>
<head>
<title>Ajax Guest Book</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:autp;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 language="javascript" type="text/javascript">
<!--
 function ajaxSubmit(){
  
  var title = document.forms[0].title.value;
  var author = document.forms[0].author.value;
  var content = document.forms[0].content.value;
  
  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!');
    }
   }
  }
  
  xmlhttp.open("post","ajaxAdd.asp",true);
  
  xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  
  xmlhttp.send("title="+escape(title)+"&author="+escape(author)+"&content="+escape(content));
 }
 
 
 function addToList(date){
  var msg = document.getElementById("msgList");
  
  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 = "Title: "+document.forms[0].title.value;
  dd.innerHTML = "Author: "+document.forms[0].author.value;
  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">
 <%
  while not rs.eof
 %>
 <dl>
  <dt>Title: <%=rs("title")%></dt>
  <dt>Author: <%=rs("author")%> &nbsp; Date: <%=rs("date")%></dt>
  <dt><%=rs("content")%></dt>
 </dl>
 <%
  rs.movenext
  wend
  
  rs.close
  conn.close
  set rs = nothing
  set conn = nothing
 %>
</div>
<div id="postBox">
 <form>
  <dl>
   <dt>Input your information</dt>
   <dd>
   Title:<input type="text" maxlength="150" size="40" name="tittle" />
   </dd>
   
   <dd>
   Author:<input type="text" maxlenght="50" size="40" name="author" />
   </dd>
   
   <dd>
   Content:<textarea rows="10" cols="45" name="content"></textarea>
   </dd>
   
   <dd class="button">
   <input type="button" οnclick="ajaxSubmit()" value="Submit" />
   <input type="reset" value="Cancel" />
   </dd>
  </dl>
 </form>
</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值