添加收藏按钮以使用 PHP 中的值更新 mysql 数据库，而无需重新加载页面 [重复]

Question

我有一个页面，它会从数据库中随机选择一些图像，并在它们旁边显示一个收藏按钮。我想最简单的方法是在 URL 中发布 ID，并在页面重新加载时将其插入数据库（然后再次重新加载以将其从 URL 中取出）。虽然，除非我在随机选择中添加某种种子，否则在重新加载时会选择全新的图像，如果您打算在页面上收藏多个图像，这显然不是很好。

我知道的另一种方法是在选项卡中打开一个新页面，将 ID 插入数据库，然后关闭页面，尽管我知道它可能会好很多，所以有人会有不离开页面如何让链接更新mysql表的例子？

网站上正在运行 jquery，但我只知道一点点 javascript，所以如果我能做一些基本的工作就好了。我很可能可以改变字体颜色，只需要 mysql 位的帮助。

其实并不重要，但表只有 FavID、UserID、ImgID 和 Date

另外，我已经快速浏览了这个 - How to update a mysql database without reloading page，这是为了将 ID 发布到另一个页面以在不重定向用户的情况下运行吗？它是否也有会话变量，或者我也应该发布所需的变量？

谢谢

Answer 1

使用 AJAX ！

if ((isset($_POST['Action'])) && (substr($_POST['Action'], 0, 11) == "AJAX_Update")) {
    $id = substr($_POST['Action'], 11);
    // Update SQL
    $query = "...";
    @$result = mysqli_query($query);
    if ($result) { print "OK"; } else { print "Error !"; }
    die();
}

(...)

$id = 5; // Example
print "<img src='update.png' style='cursor:pointer' onClick='AJAX_Update($id);'>"; print "<span id='result'></span>";

(...)

?>

<script language='JavaScript'>

            function AJAX_Update(id) {
                xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.all['result'].innerHTML = 'Update result : ' + xhr.responseText;
                    }
                }
                xhr.open("POST", "<?php print "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']; ?>", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("Action=AJAX_Update" + id);
            }

</script>