如何通过Ajax点击事件分离TXT文件中的点赞与点踩数值

我猜你之前的问题核心原因要么是计数器文件的存储格式没区分开点赞和点踩数值，要么是Ajax请求后错误地把两个显示值都更新成了同一个返回结果。咱们一步步来解决这个问题：

第一步：规范计数器文件的存储格式 #

之前你用counter.txt存数值，估计是用单行或者两行的纯数字，很容易在读写时搞混。换成JSON格式会更可靠，能明确区分两个字段：
初始的counter.txt内容应该是：

{"like": 0, "dislike": 0}

第二步：修正PHP处理逻辑 #

你的PHP代码需要正确识别操作类型（点赞/点踩），只更新对应数值，同时处理并发读写的问题（避免多个用户同时操作时数据出错）。这里给你写个完整的vote.php示例：

<?php
$counterFile = 'counter.txt';

// 如果文件不存在，初始化默认数据
if (!file_exists($counterFile)) {
    file_put_contents($counterFile, json_encode(['like' => 0, 'dislike' => 0]));
}

// 获取前端传来的操作类型
$action = $_POST['action'] ?? '';

// 读取并解析计数器数据
$counterData = json_decode(file_get_contents($counterFile), true);

// 只更新对应操作的数值
if ($action === 'like') {
    $counterData['like']++;
} elseif ($action === 'dislike') {
    $counterData['dislike']++;
}

// 写入数据时加锁，防止并发冲突
$fileHandle = fopen($counterFile, 'w');
if ($fileHandle) {
    flock($fileHandle, LOCK_EX); // 加排他锁，确保同一时间只有一个进程写文件
    fwrite($fileHandle, json_encode($counterData));
    flock($fileHandle, LOCK_UN); // 释放锁
    fclose($fileHandle);
}

// 返回更新后的完整计数器数据（JSON格式）
header('Content-Type: application/json');
echo json_encode($counterData);
?>

第三步：修复前端Ajax逻辑 #

之前的问题很可能是点击按钮后，你把两个显示数值都设置成了同一个返回值。现在要做的是：点击点赞就只更新点赞数，点击点踩就只更新点踩数。示例代码如下：

<!-- 按钮和计数显示区域 -->
<div>
    <button id="likeBtn">点赞 <span id="likeCount">0</span></button>
    <button id="dislikeBtn">点踩 <span id="dislikeCount">0</span></button>
</div>

<script>
// 页面加载时先获取初始计数
window.onload = function() {
    loadCounter();
};

// 获取当前计数并更新显示
function loadCounter() {
    fetch('vote.php', { method: 'POST', body: new FormData() })
        .then(res => res.json())
        .then(data => {
            document.getElementById('likeCount').textContent = data.like;
            document.getElementById('dislikeCount').textContent = data.dislike;
        });
}

// 点赞按钮点击事件
document.getElementById('likeBtn').addEventListener('click', function() {
    const formData = new FormData();
    formData.append('action', 'like');
    
    fetch('vote.php', { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            // 只更新点赞数
            document.getElementById('likeCount').textContent = data.like;
        });
});

// 点踩按钮点击事件
document.getElementById('dislikeBtn').addEventListener('click', function() {
    const formData = new FormData();
    formData.append('action', 'dislike');
    
    fetch('vote.php', { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            // 只更新点踩数
            document.getElementById('dislikeCount').textContent = data.dislike;
        });
});
</script>

关键注意点 #

1. 避免并发冲突：用flock加锁是很重要的，不然多个用户同时点击按钮时，很可能出现计数不准确的情况。
2. 精准更新DOM：一定要根据操作类型只更新对应的计数显示，这是解决你“点踩数值和点赞一致”问题的核心。
3. JSON格式的优势：相比纯文本行，JSON能明确区分两个字段，不会因为读写时的换行、空格问题导致数值混淆。

内容的提问来源于stack exchange，提问作者Jack Maessen