如何在不刷新页面的情况下实现织梦dedecms首页文章列表的实时顶和踩功能？

要实现织梦dedecms首页文章列表无刷新实时顶、踩功能，可以使用AJAX技术。具体步骤如下：，，1. 在模板中找到首页文章列表的HTML代码，为每个文章的“顶”和“踩”按钮添加一个唯一的ID或class，并为其添加点击事件。，2. 编写JavaScript函数，用于处理点击事件。当用户点击“顶”或“踩”按钮时，触发该函数。，3. 在JavaScript函数中，使用AJAX技术向后端发送请求，传递文章ID和操作类型（顶或踩）。，4. 后端接收到请求后，更新数据库中对应文章的顶、踩数量，并将新的数量返回给前端。，5. 前端接收到新的顶、踩数量后，更新页面上的文章列表，实现无刷新实时更新。，，以下是一个简单的示例代码：，，“ javascript，// HTML代码，顶，踩，，// JavaScript代码，document.querySelectorAll('.vote').forEach(function(item) {， item.addEventListener('click', function() {， var id = this.getAttribute('dataid');， var type = this.getAttribute('datatype');， var that = this;，， // AJAX请求， var xhr = new XMLHttpRequest();， xhr.open('POST', 'update_vote.php', true);， xhr.setRequestHeader('ContentType', 'application/xwwwformurlencoded');， xhr.onreadystatechange = function() {， if (xhr.readyState == 4 && xhr.status == 200) {， var response = JSON.parse(xhr.responseText);， if (type == 'up') {， that.innerHTML = '已顶(' + response.up_count + ')';， } else {， that.innerHTML = '已踩(' + response.down_count + ')';， }， }， };， xhr.send('id=' + id + '&type=' + type);， });，});，` ，，后端PHP代码（update_vote.php）：，，“php，

在织梦dedecms中，实现首页文章列表无刷新时时顶、踩功能，可以通过Ajax技术与后端API的配合来实现，下面详细讲解如何实现这一功能。

1. 准备工作

确保你的网站已经安装并配置好了织梦dedecms，并且你已经具备一定的前端开发基础，了解HTML、CSS和JavaScript。

2. 修改模板文件

找到你所使用的dedecms模板文件，通常位于/templates 目录下，我们需要对首页模板进行修改，添加按钮和事件监听器。

<button  dataid="{dede:field name='aid'/}">顶</button>
<button  dataid="{dede:field name='aid'/}">踩</button>

3. 编写JavaScript代码

在页面的底部引入一个自定义的JavaScript文件，例如main.js：

<script src="/static/js/main.js"></script>

在main.js 文件中，编写如下代码：

document.addEventListener('DOMContentLoaded', function() {
    const likeBtns = document.querySelectorAll('.likebtn');
    const dislikeBtns = document.querySelectorAll('.dislikebtn');
    likeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const articleId = this.getAttribute('dataid');
            performLikeAction(articleId);
        });
    });
    dislikeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const articleId = this.getAttribute('dataid');
            performDislikeAction(articleId);
        });
    });
});
function performLikeAction(articleId) {
    fetch('/api/like', {
        method: 'POST',
        headers: {
            'ContentType': 'application/json',
        },
        body: JSON.stringify({ articleId: articleId }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('点赞成功！');
        } else {
            alert('点赞失败！');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
function performDislikeAction(articleId) {
    fetch('/api/dislike', {
        method: 'POST',
        headers: {
            'ContentType': 'application/json',
        },
        body: JSON.stringify({ articleId: articleId }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('点踩成功！');
        } else {
            alert('点踩失败！');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

4. 后端接口实现

在你的dedecms后台，你需要创建两个API接口来处理顶和踩的请求，可以在plus 文件夹下创建一个新的PHP文件，例如api_like.php 和api_dislike.php。

api_like.php 示例代码：

<?php
header('ContentType: application/json');
require_once './config.php';
$articleId = $_POST['articleId'];
// 更新数据库操作，这里假设有一个updateArticle方法来更新数据
if (updateArticle($articleId, 1)) { // 1代表点赞操作
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

api_dislike.php 示例代码：

<?php
header('ContentType: application/json');
require_once './config.php';
$articleId = $_POST['articleId'];
// 更新数据库操作，这里假设有一个updateArticle方法来更新数据
if (updateArticle($articleId, 1)) { // 1代表点踩操作
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

5. 测试和优化

完成以上步骤后，部署到服务器并进行测试，确保点击顶和踩按钮时能够正确调用接口并更新数据，如果遇到问题，可以使用浏览器的开发者工具查看网络请求和控制台日志进行调试。

FAQs

Q1: 如果用户多次点击同一个按钮会怎么样？

A1: 目前代码没有限制用户的点击次数，如果需要防止用户多次点击，可以添加一些防抖措施或在服务器端记录用户的操作，避免短时间内重复提交。

Q2: 如何在页面上显示当前的点赞和点踩数量？

A2: 可以在页面加载时通过Ajax请求获取每篇文章的点赞和点踩数量，并在按钮旁边显示，当用户点击按钮时，再通过Ajax更新这些数量。