Ajax在线提交留言并实时显示的js代码[修正版]

　　学习Ajax提交的朋友，不妨参考一下吧，从中你会明白一些技巧吧。

　　因代码本身的问题，管理资源吧已经修正，欢迎大家测试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Ajax留言本</title> 
<style type="text/css"> 
* { padding: 0; margin: 0; } 
li { list-style: none; } 
body { background: #f9f9f9; font-size: 14px; } 
#explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: 
center; line-height: 60px; } 
#explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; } 
#explain a:hover { border-bottom: 2px solid #990000; } 
#explain strong { color: #990000; } 
#box { width: 450px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; margin: 10px auto; } 
#fill_in { margin-bottom: 10px; } 
#fill_in li { padding: 5px 0; } 
#fill_in .text { width: 380px; height: 30px; padding: 0 10px; border: 1px solid #ccc; line-height: 30px; font-size: 14px; 
font-family: arial; } 
#fill_in textarea { width: 380px; height: 100px; line-height: 20px; padding: 5px 10px; border: 1px solid #ccc; font-size: 
14px; font-family: arial; overflow: auto; vertical-align: top; } 
#fill_in .btn { border: none; width: 100px; height: 30px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 
14px; position: relative; left: 42px; } 
#message_text { display: none; } 
#message_text h2 { font-size: 14px; padding: 6px 0 4px 10px; background: #ddd; border-bottom: 1px solid #ccc; } 
#message_text li { background: #f9f9f9; border-bottom: 1px solid #ccc; color: #666; overflow: hidden; } 
#message_text h3 { padding: 10px; font-size: 14px; line-height: 24px; } 
#message_text p { padding: 0 10px 10px; text-indent: 28px; line-height: 20px; } 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20oBtn%20%3D%20null%3B%20%0D%0Avar%20oForm%20%3D%20null%3B%20%0D%0Avar%20oText%20%3D%20null%3B%20%0D%0Avar%20oTextarea%20%3D%20null%3B%20%0D%0Avar%20timer%20%3D%20null%3B%20%0D%0Avar%20speed%20%3D%200%3B%20%0D%0Avar%20oLi%20%3D%20null%20%0D%0Avar%20oH3%20%3D%20null%3B%20%0D%0Avar%20oP%20%3D%20null%3B%20%0D%0Awindow.onload%20%3D%20function()%20%0D%0A%7B%20%0D%0AoBtn%20%3D%20document.getElementById(%22btn%22)%3B%20%0D%0AoBtn.onclick%20%3D%20getValue%3B%20%0D%0A%7D%3B%20%0D%0Afunction%20getValue()%20%0D%0A%7B%20%0D%0Adocument.getElementById(%22message_text%22).style.display%20%3D%20%22block%22%3B%20%0D%0AoForm%20%3D%20document.getElementsByTagName(%22form%22)%5B0%5D%3B%20%0D%0AoText%20%3D%20document.getElementById(%22text%22)%3B%20%0D%0AoTextarea%20%3D%20document.getElementsByTagName(%22textarea%22)%5B0%5D%3B%20%0D%0AoUl%20%3D%20document.getElementById(%22message_text%22).getElementsByTagName(%22ul%22)%5B0%5D%3B%20%0D%0AoForm.onsubmit%20%3D%20function()%7B%20return%20false%3B%20%7D%3B%20%0D%0Aif(%20oText.value%20%3D%3D%20%22%22%20%7C%7C%20oTextarea.value%20%3D%3D%20%22%22%20)%20%0D%0A%7B%20%0D%0Aalert(%22%E5%B0%B1%E4%BA%8C%E4%B8%AA%E6%A1%86%EF%BC%8C%E4%BD%A0%E8%BF%98%E4%B8%8D%E5%86%99%E5%85%A8%E4%BA%86%E5%95%8A%EF%BC%9F%22)%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0AoLi%20%3D%20document.createElement(%22li%22)%3B%20%0D%0AoH3%20%3D%20document.createElement(%22h3%22)%3B%20%0D%0AoP%20%3D%20document.createElement(%22p%22)%3B%20%0D%0AoH3.innerHTML%20%3D%20oText.value%3B%20%0D%0AoP.innerHTML%20%3D%20oTextarea.value%3B%20%0D%0Aif(oUl.childNodes%5B0%5D)%20%0D%0A%7B%20%0D%0AoUl.insertBefore(oLi%2CoUl.childNodes%5B0%5D)%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AoUl.appendChild(oLi)%3B%20%0D%0A%7D%20%0D%0AoLi.appendChild(oH3)%3B%20%0D%0AoLi.appendChild(oP)%3B%20%0D%0AoText.value%20%3D%20%22%22%3B%20%0D%0AoTextarea.value%20%3D%20%22%22%3B%20%0D%0Avar%20h%20%3D%20oLi.offsetHeight%3B%20%0D%0AoLi.style.height%20%3D%20'0px'%3B%20%0D%0Aif(timer)%20%0D%0A%7B%20%0D%0AclearInterval(timer)%3B%20%0D%0A%7D%20%0D%0Atimer%20%3D%20setInterval(%22goTime(%22%2Bh%2B%22)%22%2C%2035)%3B%20%0D%0AgoTime(h)%3B%20%0D%0A%7D%20%0D%0Afunction%20goTime(target)%20%0D%0A%7B%20%0D%0Avar%20top%20%3D%20oLi.offsetHeight%3B%20%0D%0Aspeed%20%2B%3D%203%3B%20%0D%0Atop%20%2B%3D%20speed%3B%20%0D%0Aif(top%20%3E%20target)%20%0D%0A%7B%20%0D%0Atop%20%3D%20target%3B%20%0D%0Aspeed%20*%3D%20-0.7%3B%20%0D%0A%7D%20%0D%0Aif(top%3D%3D%3Dtarget%20%26%26%20Math.abs(speed)%20%3C%203)%20%0D%0A%7B%20%0D%0AclearInterval(timer)%3B%20%0D%0Atimer%20%3D%20null%3B%20%0D%0AoLi.style.height%20%3D%20target%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0AoLi.style.height%20%3D%20top%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="explain"> 
不妨多提交几次留言试试看……</div> 
<div id="box"> 
<ul id="fill_in"> 
<form> 
<li>姓名：<input id="text" type="text" class="text" /></li> 
<li>内容：<textarea id="content" style="width:300px; height:100px"></textarea></li> 
<li><input id="btn" type="submit" value="提交" class="btn" /></li> 
</form> 
</ul> 
<div id="message_text"> 
<h2>显示留言</h2> 
<ul></ul> 
</div> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程