使用Ajax刷新评论可以通过以下步骤实现:
var xmlhttp;
if (window.XMLHttpRequest) {
// 针对大多数浏览器
xmlhttp = new XMLHttpRequest();
} else {
// 针对IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 定义回调函数
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 处理从服务器返回的数据
var response = xmlhttp.responseText;
// 更新评论区域的内容
document.getElementById("comment-area").innerHTML = response;
}
};
// 获取评论区域的元素
var commentArea = document.getElementById("comment-area");
// 定义刷新评论的事件处理函数
function refreshComments() {
// 发送Ajax请求到服务器
xmlhttp.open("GET", "refresh_comments.php", true);
xmlhttp.send();
}
// 在适当的时机调用刷新评论的函数
commentArea.addEventListener("click", refreshComments);
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接数据库失败: " . $conn->connect_error);
}
// 查询最新的评论数据
$sql = "SELECT * FROM comments ORDER BY created_at DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 构建评论列表的HTML内容
$commentsHtml = "";
while($row = $result->fetch_assoc()) {
$commentsHtml .= "<div class='comment'>";
$commentsHtml .= "<p class='author'>" . $row["author"] . "</p>";
$commentsHtml .= "<p class='content'>" . $row["content"] . "</p>";
$commentsHtml .= "<p class='timestamp'>" . $row["created_at"] . "</p>";
$commentsHtml .= "</div>";
}
// 将评论列表返回给前端
echo $commentsHtml;
} else {
echo "暂无评论";
}
$conn->close();
?>
以上是使用Ajax刷新评论的基本步骤。根据具体的需求,你可以进一步优化代码,例如在刷新评论时显示加载动画、添加分页功能等。
如果你在腾讯云上搭建网站,你可以使用腾讯云的云服务器(CVM)来部署服务器端脚本,使用腾讯云的云数据库(TencentDB)来存储评论数据。关于腾讯云的相关产品和产品介绍,你可以访问腾讯云官网(https://cloud.tencent.com/)来获取更详细的信息。
领取专属 10元无门槛券
手把手带您无忧上云