点击点赞按钮后如何阻止页面刷新？

我开发了内容点赞功能，点击点赞按钮时通过服务端代码将数据保存至数据库，但点击按钮后页面会刷新且出现异常。尝试使用JavaScript的event.preventDefault()方法阻止页面刷新却未生效，先后试了三段代码仍无法解决问题，求更优实现方案。

尝试过的代码 #

第一段：按钮加onsubmit="return false;" #

echo '<form method="POST" action="profile.php" id="likeForm">';
echo '<input type="hidden" name="id_' . $publication_id . '" value="' . $publication_id . '">';
echo '<div class="button-container">';
echo '<button type="submit" id="likeButton" onsubmit="return false;">' . $heart_icon . '</button>';
echo '</div>';
echo '</form>';

第二段：原生AJAX绑定按钮点击 #

echo '<form method="POST" action="profile.php" id="likeForm">';
echo '<input type="hidden" name="id_' . $publication_id . '" value="' . $publication_id . '">';
echo '<div class="button-container">';
echo '<button type="button" id="likeButton">' . $heart_icon . '</button>';
echo '</div>';
echo '</form>';

echo '<script>';
echo 'document.getElementById("likeButton").addEventListener("click", function() {';
echo 'var xhr = new XMLHttpRequest();';
echo 'xhr.open("POST", "profile.php");';
echo 'xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");';
echo 'xhr.onload = function() {';
echo 'if (xhr.status === 200) {';
echo 'console.log(xhr.responseText);'; // 可替换为成功提示
echo '}';
echo '};';
echo 'xhr.send("id_' . $publication_id . '=' . $publication_id . '");';
echo '});';
echo '</script>';

第三段：jQuery表单提交事件绑定 #

$(function() {
    $('#likeForm').on('submit', function(e) {
        $.ajax({
            type: 'post',
            url: 'profile.php',
            data: $('#likeForm').serialize(),
            success: function() {
                alert("Data has been submitted!");
            }
        });
        e.preventDefault();
    });
});

问题根源与解决方案 #

核心问题：重复DOM ID导致事件绑定失效 #

如果页面存在多个动态生成的点赞表单，所有表单/按钮都使用固定id="likeForm"、id="likeButton"会导致选择器仅匹配第一个元素，后续元素的事件绑定完全失效，自然无法阻止页面刷新。

优化后的完整实现 #

1. 动态生成表单（用类名替代固定ID）

// 用类名和统一的表单字段名，避免重复ID问题
echo '<form class="like-form" method="POST" action="profile.php">';
// 统一字段名，便于服务端处理
echo '<input type="hidden" name="publication_id" value="' . $publication_id . '">';
echo '<div class="button-container">';
// 保留submit类型按钮，通过表单submit事件处理
echo '<button type="submit" class="like-button">' . $heart_icon . '</button>';
echo '</div>';
echo '</form>';

2. 前端事件处理（事件委托+Fetch API）

// 用事件委托绑定到document，兼容所有动态生成的表单
document.addEventListener('submit', function(e) {
    const form = e.target;
    // 仅处理点赞表单
    if (!form.classList.contains('like-form')) return;
    
    e.preventDefault(); // 彻底阻止表单默认提交行为
    const publicationId = form.querySelector('input[name="publication_id"]').value;

    // 用Fetch API发送请求（比XMLHttpRequest更简洁）
    fetch('profile.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `publication_id=${encodeURIComponent(publicationId)}`
    })
    .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
    })
    .then(data => {
        console.log('操作成功:', data);
        // 即时更新UI，比如切换爱心状态
        const button = form.querySelector('.like-button');
        button.innerHTML = button.textContent.includes('♥') ? '♡' : '♥';
    })
    .catch(error => {
        console.error('操作失败:', error);
        alert('点赞失败，请稍后重试');
    });
});

3. 服务端处理（profile.php）

// 只处理AJAX点赞请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['publication_id'])) {
    // 防SQL注入：必须用预处理语句
    $publicationId = intval($_POST['publication_id']);
    $userId = $_SESSION['user_id']; // 假设当前用户ID存在于session中

    // 示例：切换点赞状态（已点赞则取消，未点赞则添加）
    $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
    $stmt = $pdo->prepare("
        INSERT INTO likes (publication_id, user_id) 
        VALUES (?, ?) 
        ON DUPLICATE KEY DELETE
    ");
    $stmt->execute([$publicationId, $userId]);

    // 返回JSON结果，避免输出整页内容
    header('Content-Type: application/json');
    echo json_encode([
        'success' => true,
        'message' => '点赞状态更新成功'
    ]);
    exit; // 终止后续页面输出，确保AJAX只拿到JSON结果
}

// 非AJAX请求的正常页面逻辑
// ... 原profile.php代码

关键优化点 #

• 避免重复ID：用类名替代固定ID，支持页面多个点赞按钮。
• 事件委托：绑定事件到父元素，确保动态生成的表单也能触发事件。
• 服务端隔离AJAX请求：仅返回JSON结果，避免整页输出导致AJAX响应异常。
• 安全防护：使用预处理语句防止SQL注入。
• 即时UI反馈：点赞成功后立即更新按钮状态，提升用户体验。

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