Ajax实现评论中顶和踩功能的实例代码

下面是Ajax实现评论中顶和踩功能的完整攻略。

1. 实现思路

实现评论中顶和踩功能，需要使用 Ajax 技术，通过向服务器端发送异步请求，实现对数据库中的数据进行增、删、改的操作。

一般而言，实现评论中顶和踩功能的流程如下：

1. 点击“顶”或“踩”按钮；
2. 发送 Ajax 请求到服务器端；
3. 服务器端接收请求，根据请求的类型，在数据库中进行相应的操作；
4. 服务器端将操作结果返回给客户端；
5. 客户端通过 JavaScript 将返回的操作结果，反映在页面上。

2. 实例代码

为了更加清晰地说明，我们采用两个示例代码来介绍如何实现评论中的顶和踩功能，分别是：

• 使用 jQuery 实现；
• 使用原生 JavaScript 实现。

2.1 jQuery 实现

下面是基于 jQuery 的实例代码：

// 绑定“顶”和“踩”按钮的点击事件
$(document).on('click', '.btn-up, .btn-down', function() {
    var cid = $(this).attr('data-cid'); // 获取评论的ID
    var action = $(this).hasClass('btn-up') ? 'up' : 'down'; // 判断是“顶”还是“踩”

    // 发送异步请求
    $.ajax({
        url: '/comment/vote',
        type: 'POST',
        data: {
            cid: cid,
            action: action
        },
        success: function(result) {
            if (result.code === 200) { // 成功
                // 更新页面显示
                $('#up-' + cid).text(result.data.up);
                $('#down-' + cid).text(result.data.down);
            } else { // 错误
                alert(result.msg);
            }
        },
        error: function(xhr, status, error) {
            console.log(error);
        }
    });
});

代码分析：

1. 首先，绑定“顶”、“踩”按钮的点击事件；
2. 点击事件发生时，获取评论的 ID 和要进行的操作（顶或踩）；
3. 使用 jQuery 的 $.ajax() 方法，发送异步请求；
4. 服务器端根据请求的内容，在数据库中进行相应的操作，并将操作结果返回给客户端；
5. 在 Ajax 的 success 回调函数中，更新页面显示。

2.2 原生 JavaScript 实现

下面是基于原生 JavaScript 实现的实例代码：

// 绑定“顶”和“踩”按钮的点击事件
var commentList = document.getElementById('comment-list');
commentList.addEventListener('click', function(event) {
    var target = event.target;
    if (target.classList.contains('btn-up') || target.classList.contains('btn-down')) { // 点击了“顶”或“踩”按钮
        var cid, action;
        if (target.classList.contains('btn-up')) { // 点击了“顶”按钮
            cid = target.getAttribute('data-cid');
            action = 'up';
        } else if (target.classList.contains('btn-down')) { // 点击了“踩”按钮
            cid = target.getAttribute('data-cid');
            action = 'down';
        }

        // 发送异步请求
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/comment/vote', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var result = JSON.parse(xhr.responseText);
                    if (result.code === 200) { // 成功
                        // 更新页面显示
                        var up = document.getElementById('up-' + cid);
                        var down = document.getElementById('down-' + cid);
                        up.innerHTML = result.data.up.toString();
                        down.innerHTML = result.data.down.toString();
                    } else { // 错误
                        alert(result.msg);
                    }
                } else {
                    console.log('请求失败');
                }
            }
        }
        xhr.send('cid=' + cid + '&action=' + action);
    }
});

代码分析：

1. 首先，获取评论列表的 DOM 元素，并绑定 click 事件；
2. 如果点击的是“顶”或“踩”按钮，则获取评论的 ID 和要进行的操作；
3. 创建 XMLHttpRequest 对象，配置请求参数；
4. 发送异步请求，并在 onreadystatechange 回调函数中处理服务器端返回的结果；
5. 在回调函数中，根据 xhr.status 和 xhr.responseText 的值，处理请求的状态和响应的数据，并更新页面显示。