如何实现织梦dedecms首页文章列表的实时顶和踩功能而无需刷新页面？

在织梦CMS（DedeCMS）中，为了实现首页文章列表的实时顶踩功能而无需刷新页面，我们可以利用AJAX技术来实现，下面将详细介绍实现这一功能的步骤和方法。

1. 准备工作

确保你的网站已经安装并运行了DedeCMS系统，并且你具备一定的PHP和JavaScript编程基础。

2. AJAX请求处理

我们需要编写一个处理AJAX请求的PHP脚本，该脚本会接收来自前端的顶或踩请求，并更新数据库中的相应数据。

// ajax_vote.php
<?php
require_once dirname(__FILE__) . '/include/common.inc.php'; // 引入DedeCMS核心文件
if(!defined('DEDEINCLUDEMETA')) exit("Request Error!");
$action = isset($_GET['action']) ? $_GET['action'] : '';
$aid = isset($_GET['aid']) ? intval($_GET['aid']) : 0;
if ($action == 'up') {
    // 处理顶的逻辑
    $dsql>ExecuteNoneQuery("UPDATE#@__archives SETclick=click+1 WHERE id=" . $aid);
    echo json_encode(array('status' => 'success', 'message' => 'Thanks for your vote!'));
} else if ($action == 'down') {
    // 处理踩的逻辑
    $dsql>ExecuteNoneQuery("UPDATE#@__archives SETclick=click1 WHERE id=" . $aid);
    echo json_encode(array('status' => 'success', 'message' => 'Thanks for your vote!'));
} else {
    echo json_encode(array('status' => 'error', 'message' => 'Invalid action!'));
}
?>

3. 前端HTML与JavaScript代码

我们需要在首页的文章列表部分添加HTML元素，并通过JavaScript来发送AJAX请求。

HTML部分:

假设我们有一个文章列表，每篇文章都有一个“顶”和“踩”按钮：

<div class="article" dataid="1">
    <h2>Article Title</h2>
    <p>Article Content...</p>
    <button class="vote up">Upvote</button>
    <button class="vote down">Downvote</button>
</div>
<div class="article" dataid="2">
    <h2>Another Article Title</h2>
    <p>Another Article Content...</p>
    <button class="vote up">Upvote</button>
    <button class="vote down">Downvote</button>
</div>

JavaScript部分:

使用jQuery库来简化AJAX请求：

$(document).ready(function() {
    $('.vote').on('click', function() {
        var action = $(this).hasClass('up') ? 'up' : 'down';
        var articleId = $(this).closest('.article').data('id');
        
        $.ajax({
            url: 'ajax_vote.php',
            method: 'GET',
            data: { action: action, aid: articleId },
            success: function(response) {
                var result = JSON.parse(response);
                if (result.status === 'success') {
                    alert(result.message);
                } else {
                    alert('Error: ' + result.message);
                }
            },
            error: function() {
                alert('AJAX request failed.');
            }
        });
    });
});

4. 测试与调试

完成以上步骤后，保存所有更改并上传到服务器，访问首页并点击“顶”或“踩”按钮，查看是否能够正确响应并更新数据库记录，如果没有，请检查浏览器控制台中的错误信息，并进行相应的调试。

FAQs

Q1: 如何确保只有登录用户才能进行顶踩操作？

A1: 可以在AJAX请求的服务器端脚本中增加用户验证逻辑，例如检查用户的会话状态，如果用户未登录，则拒绝请求并返回错误信息。

session_start();
if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
    echo json_encode(array('status' => 'error', 'message' => 'Please log in to vote.'));
    exit;
}

Q2: 如何防止重复投票？

A2: 可以在数据库中为每个用户和文章组合添加一个唯一约束字段，例如user_id和article_id的组合，每次投票前检查这个字段是否存在，如果存在则拒绝投票请求。

步骤	描述	代码示例
1. 准备工作	确保您的织梦dedecms版本支持AJAX操作，并准备好相关的HTML、CSS和JavaScript文件。	确认dedecms版本，检查是否支持AJAX。
2. 创建AJAX函数	使用JavaScript编写一个AJAX函数，用于发送请求到服务器，并处理返回的数据。	“`javascript

function likeOrDislike(id, type) {

$.ajax({

url: ‘like_dislike.php’, // 服务器处理文件

type: ‘POST’,

data: { id: id, type: type },

success: function(response) {

// 处理响应数据

$(‘#like_count’).text(response.like_count);

$(‘#dislike_count’).text(response.dislike_count);

},

error: function(xhr, status, error) {

console.error(‘Error: ‘ + error);

}

});

“` |

| 3. 创建服务器端处理文件 | 创建一个PHP文件（如like_dislike.php），用于处理AJAX请求，并根据用户操作更新顶、踩数量。 | “`php

<?php

// like_dislike.php

$id = $_POST[‘id’];

$type = $_POST[‘type’];

// 连接数据库

$db = new mysqli(‘localhost’, ‘username’, ‘password’, ‘database’);

// 检查顶、踩记录是否存在

$query = "SELECT * FROM like_dislike WHERE aid = $id AND type = $type";

$result = $db>query($query);

if ($result>num_rows > 0) {

// 更新记录

$query = "UPDATE like_dislike SET count = count + 1 WHERE aid = $id AND type = $type";

} else {

// 插入新记录

$query = "INSERT INTO like_dislike (aid, type, count) VALUES ($id, $type, 1)";

$db>query($query);

// 获取顶、踩总数

$query = "SELECT SUM(count) AS total FROM like_dislike WHERE aid = $id AND type = $type";

$result = $db>query($query);

$row = $result>fetch_assoc();

$total = $row[‘total’];

// 返回结果

echo json_encode([‘like_count’ => $total, ‘dislike_count’ => 0]); // 假设只实现顶功能

?>

“` |

| 4. 修改dedecms模板文件 | 在dedecms首页文章列表模板中，添加JavaScript事件监听器，用于触发AJAX函数。 | “`html

顶0

“` |

| 5. 测试 | 在浏览器中预览您的dedecms网站，并测试顶、踩功能是否正常工作。 | 在文章列表中点击“顶”按钮，观察顶数量是否正确更新。 |