<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax GuestBook</title>
<style type="text/css">
.textline{
BORDER-BOTTOM: #e6e6d9 1px solid;
line-height : 150%;
}
//定义样式
<!--
body { font-size:10pt;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:600px;border:1px solid #666;}
#postBox { margin-top:10px;} //给id为postBox定义样式
dd.button { text-align:center;}
dd.button input { margin:0 20px;} //给dd 下的 button 和input 控件定义样式
//-->
</style>
<script type="text/javascript">
<!--
//将用户输入异步提交到服务器
function ajaxSubmit(){
//获取用户输入
//三种获取对象值的方式
var title=document.forms[0].title.value;
var author=document.all("author").value;
var content=document.theForm.content.value;
//创建XMLHttpRequest对象
alert(author);
}
//将用户输入显示到页面
function addToList(){
//获取留言列表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");
var data = new Date();
//将结点插入到相应的位置
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+" 日期："+data.toLocaleString();
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">
<dl>
<dt>标题：</dt>
<dd>作者：> 日期：></dd>
<dd> </dd>
</dl>
</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="5" cols="65" name="content"></textarea>
</dd>
<dd class="button">
<input type="button" onClick="addToList()" value="提交"/>
<input type="reset" value="重填" onClick="ajaxSubmit()"/>
</dd>
</dl>
</form>
</div>
<p> </p>
</body>
</html>
代码
