AJAX无刷新评论

最新推荐文章于 2022-08-16 11:13:07 发布

前端晚自习

最新推荐文章于 2022-08-16 11:13:07 发布

阅读量672

点赞数

分类专栏： ASP.NET .NET 文章标签： ajax button function input

本文链接：https://blog.csdn.net/weican57/article/details/6615476

版权

.NET 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

ASP.NET

9 篇文章 0 订阅

订阅专栏

<html>
<head>
<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>
这里是文章的正文，在评论区输入昵称评论的内容，就会无刷新的将评论显示在评论区，这是AJAX无刷新评论实现的技术基础！
<p>评论区：</p>
<table id="tableComment">
    <tbody>
        <tr><td>最强大</td><td>沙发耶！</td></tr>
    </tbody>
</table>
昵称：<input id="nickname" type="text" /><br />
<textarea id="comment"></textarea><br />
<input type="button" value="评论" οnclick="AddComment()" />
</body>
</html>

前端晚自习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX无刷新评论

function AddComment() { var nickname = document.getElementById("nickname").value; var comment = document.getElemen
复制链接

扫一扫