我编写了代码来like一个出版物，单击like按钮使用服务器端代码将值保存到数据库中。但是，当我单击该按钮时，页面刷新以保存该值，我遇到了一些问题。我尝试使用像event.preventDefault()这样的JavaScript代码，但它不起作用。你能提出一个更好的方法来实现这一点吗？

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>';

我试了event.preventDefault()，我也试了这个代码：

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);'; // or you can show a success message here
echo '}';
echo '};';
echo 'xhr.send("id_' . $publication_id . '=' . $publication_id . '");';
echo '});';
echo '</script>';

最后是这个：

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