js和ajax点赞功能代码

点赞功能在前端开发中非常常见，通常涉及到JavaScript和AJAX技术。下面是一个简单的点赞功能实现示例，包括HTML、CSS和JavaScript代码。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞功能</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="post">
        <h2>这是一个帖子标题</h2>
        <button id="likeButton" class="like-button">点赞 (0)</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.like-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const likeButton = document.getElementById('likeButton');
    let likeCount = 0;

    likeButton.addEventListener('click', function() {
        likeCount++;
        likeButton.textContent = `点赞 (${likeCount})`;

        // 使用AJAX发送点赞请求到服务器
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/like', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log('点赞成功');
            }
        };
        xhr.send(JSON.stringify({ postId: 1 })); // 假设帖子ID为1
    });
});

解释

HTML部分：创建了一个简单的页面结构，包含一个按钮用于点赞。
CSS部分：为点赞按钮添加了一些基本样式。
JavaScript部分：
- 监听DOMContentLoaded事件，确保DOM完全加载后再执行脚本。
- 获取点赞按钮元素，并初始化点赞计数器。
- 为按钮添加点击事件监听器，每次点击时增加点赞计数并更新按钮文本。
- 使用XMLHttpRequest对象发送AJAX POST请求到服务器，模拟点赞操作。