如何实现DEDECMS中的AJAX无刷新评论功能？

在当今的Web开发中，AJAX技术被广泛应用以提高用户体验，DedeCMS作为一款流行的开源内容管理系统，通过实现AJAX无刷新评论功能，可以让用户在不重新加载页面的情况下提交和查看评论，从而提升网站的交互性和用户满意度，本文将详细介绍如何在DedeCMS中实现这一功能。

一、准备工作

在开始之前，请确保您已经安装了DedeCMS，并且对PHP和MySQL有一定的了解，还需要准备一个支持AJAX的开发环境，如Chrome或Firefox浏览器，以及相应的调试工具。

二、修改模板文件

我们需要修改DedeCMS的模板文件，以便在页面上添加用于提交评论的表单和显示评论的区域，假设我们要在文章详情页添加这个功能，那么需要找到对应的模板文件，通常是/templets/default/article_article.htm。

1. 添加评论表单

在合适的位置插入以下HTML代码，创建一个用于提交评论的表单：

<div id="commentform">
    <form method="post" action="[{:dede:field name='phpurl'}]e/plus/ajax_comment.php" onsubmit="return submitComment(this);">
        <textarea name="content" required></textarea><br>
        <input type="hidden" name="aid" value="[{dede:field name='id'}]">
        <button type="submit">提交评论</button>
    </form>
</div>

这里的[{:dede:field name='phpurl'}]是DedeCMS的标签语法，用于动态生成当前页面的URL。[{dede:field name='id'}]则是文章的ID。

2. 添加评论显示区域

在页面的另一个合适位置插入以下HTML代码，用于显示已有的评论：

<div id="commentslist">
    <! 已有评论将通过AJAX加载到这里 >
</div>

三、编写JavaScript函数

我们需要编写一个JavaScript函数来处理表单的提交事件，并通过AJAX发送请求，这个函数将阻止表单的默认提交行为，收集表单数据，然后发送到服务器进行处理。

在/templets/default/article_article.htm文件中添加以下JavaScript代码：

function submitComment(form) {
    event.preventDefault(); // 阻止表单的默认提交行为
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    xhr.setRequestHeader('Contenttype', 'application/xwwwformurlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 处理服务器返回的数据，更新评论列表
            updateCommentsList(JSON.parse(xhr.responseText));
        }
    };
    var formData = new FormData(form);
    xhr.send(formData);
    return false;
}

四、创建AJAX处理脚本

为了处理AJAX请求，我们需要在DedeCMS的plus目录下创建一个名为ajax_comment.php的文件，这个文件将负责接收评论数据，并将其保存到数据库中。

<?php
require_once '../include/common.inc.php';
if ($_POST['content'] && $_POST['aid']) {
    $content = htmlspecialchars($_POST['content']);
    $aid = intval($_POST['aid']);
    $sql = "INSERT INTO#@__plus_comment (aid,content,addtime) VALUES ('$aid', '$content', '" . time() . "')";
    $dsql>ExecuteNoneQuery($sql);
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

五、实现评论列表更新功能

当服务器成功处理评论后，我们需要更新页面上的评论列表，这可以通过另一个JavaScript函数来实现，该函数将从服务器获取最新的评论数据，并更新DOM。

在/templets/default/article_article.htm文件中添加以下JavaScript代码：

function updateCommentsList(data) {
    if (data.success) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '[{:dede:field name='phpurl'}]e/plus/get_comments.php?aid=[{dede:field name='id'}]', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById('commentslist').innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    } else {
        alert('评论提交失败，请重试！');
    }
}

六、创建获取评论列表的脚本

我们需要在DedeCMS的plus目录下创建一个名为get_comments.php的文件，这个文件将负责从数据库中检索指定文章ID的所有评论，并以HTML格式返回给客户端。

<?php
require_once '../include/common.inc.php';
$aid = isset($_GET['aid']) ? intval($_GET['aid']) : 0;
$sql = "SELECT * FROM#@__plus_comment WHEREaid = '$aid' ORDER BYaddtime DESC";
$result = $dsql>Execute($sql);
while ($row = $dsql>FetchArray($result)) {
    echo "<p>{$row['content']}</p>";
}
?>

至此，我们已经完成了DedeCMS中AJAX无刷新评论功能的实现，用户现在可以在不重新加载页面的情况下提交和查看评论，从而提高了网站的交互性和用户体验。