黑马程序员——实现论坛无刷新的评论

最新推荐文章于 2025-01-13 17:58:37 发布

william_feng007

最新推荐文章于 2025-01-13 17:58:37 发布

阅读量957

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/william_feng007/article/details/6887718

本文详细介绍了如何通过DOM技术实现无刷新评论功能，并提供了具体的代码实现过程。通过此方法，评论操作不再导致页面刷新，提升了用户体验。

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

最终演示效果图如下：