<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>
AJAX无刷新评论
最新推荐文章于 2017-12-17 19:08:33 发布