首頁 > 開發者 > Ajax

ajax留言板

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天沒事就搞了一個asp的ajax留言板,這段時間學php了,很久沒搞asp了,今天溫習溫習一下.下面我們來簡單的介紹一下,留言板的設計思路,由於很簡單,我們主要的是在ajax傳回值上與儲存資料上,所以對asp就不多說了,

下面來看看所用到的檔案.

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

%>

由於比較懶所以就把串連或ajax都寫在一個頁面了.如果需要用的朋友可以下載下去自己修改即可.
<!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/javascript">
<!--
//將使用者輸入非同步提交到伺服器
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+" &nbsp;日期："+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")%> &nbsp;日期：<%=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>

後面繼續.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More