黑马程序员——实现论坛无刷新的评论
来源:互联网 发布:行知中学学区房 编辑:程序博客网 时间:2024/05/01 23:35
---------------------- Windows Phone 7手机开发、ASP.Net培训、期待与您交流! ----------------------
以前我们经常上论坛的时候,有些论坛的功能经常出现评论完了之后提交出现整个页面刷新的现象,这样给人的感觉有一种很不舒服的感觉,有时候网络忙了或者卡了,因为要重新刷新整个页面的缘故经常出现页面假死或者浏览器崩溃的现象,而我们看那些大型的网站,比如优酷啊,那个无刷新评论做的非常好,评论的时候不会导致说出现页面刷新的现象,如果刷新整个页面的话那就造成用户极大的痛苦,你想想你自己看到一半视频然后突然间因为评论了而刷新整个页面的话那视频又得重新加载又得重头开始看,那样估计你自己都会崩溃掉,对吧!那么如何实现无刷新评论呢,这里只要小小地应用到dom的技术就能很容易实现无刷新的功能!很爽吧,下面写几个代码实现这个功能的过程:
刚刚载入的时候界面如下:
想必说了这么多,很多人肯定抱怨说了那么多理论的废话干吗,还不如来几行的源代码来的实在而且更加理解一些,那么在这里我就把详细的源代码粘贴出来进行解释,对于每一行的代码我都做了深入的注释:
<head> <title>无刷新评论</title> <script type="text/javascript"> function AddComment() { var nickname =document.getElementById("nickname").value; var comment =document.getElementById("comment").value; //获得表格对象 var tableComment =document.getElementById("tableComment"); //创建新行 var tr =document.createElement("tr"); //创建昵称单元格 var tdNickName =document.createElement("td"); tdNickName.innerText = nickname; tr.appendChild(tdNickName); //添加到新行中 //创建评论内容单元格 var tdComment =document.createElement("td"); tdComment.innerText = comment; tr.appendChild(tdComment); tableComment.tBodies[0].appendChild(tr); //将新行添加到表格的tbody中,tBodies→一个表格允许有多个tbody //清空内容 document.getElementById("nickname").value = ""; document.getElementById("comment").value = ""; } </script></head>
最后在下面直接调用上面创建的函数即可:
<body><p><b>中国网10月18日讯 国务院新闻办公室18日上午举行新闻发布会,<br />国家统计局新闻发言人、国民经济综合统计司司长盛来运在会上<br/>介绍了今年前三季度国民经济运行情况。盛来运表示,前三季度,<br/>房价上涨的势头已经得到了明显遏制。</b></p><h4>评论内容:</h4>天津网友 希望房价真的能够降下来,好让每个人都能买的起气房。<table id="tableComment"> <tbody></tbody></table>昵称:<inputtype="text" id="nickname" /><br /><textarea id="comment"></textarea><br /><input type="button" value="评论" id="conment"onclick="AddComment()" /></body>
最终演示效果图如下:
---------------------- Windows Phone 7手机开发、ASP.Net培训、期待与您交流! ----------------------
- 黑马程序员——实现论坛无刷新的评论
- Jquery实现无刷新评论
- js实现无刷新评论
- js实现无刷新评论
- ajax实现局部无刷新的评论代码
- 用javascript实现无刷新评论
- Jquery+ashx实现无刷新评论
- ajax 实现网页视频无刷新评论
- AJAX技术实现无刷新技术评论
- ajax实现看视频无刷新评论
- 织梦dedecms — 前台内容页无刷新评论
- 黑马程序员——对一道论坛题目的思考
- Ajax无刷新评论
- 无刷新评论模拟
- AJAX无刷新评论
- 无刷新视频评论
- javascript 无刷新评论
- $.ajax无刷新评论
- 时间原则
- ADO 连接sql server
- C# 根据当前时间获取,本周,本月,本季度等时间段
- HTTPS与HTTP区别
- 接口数组
- 黑马程序员——实现论坛无刷新的评论
- gcc警告选项
- 最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用50
- Cookie使用相关说明
- hbase中compaction流程
- LoadRunner进行性能测试时遇到的问题汇总
- 如何看懂一个程序
- C语言变量作用域
- 如何在Eclipse下查看JDK源代码