增加点赞
在您的网站上添加点赞按钮可以为用户提供一种快速简单的方式来表达他们对您的内容的欣赏。以下是如何为您的帖子添加点赞按钮:
- 创建数据库表。您需要创建一个数据库表来存储点赞信息。表应该包含以下列:
-
id
:点赞的唯一 ID -
-count">0</span>
</div>CSS:
.like-button {display: inline-block;padding: 5px 10px;background-color: 007bff;color: fff;border: 1px solid 007bff;border-radius: 5px;font-size: 14px;cursor: pointer; }.like-count {display: inline-block;margin-left: 5px;font-size: 14px; }
JavaScript:var likeButtons = document.querySelectorAll('.like-button');for (var i = 0; i < likeButtons.length; i++) {likeButtons[i].addEventListener('click', function(e) {var post_id = e.target.dataset.postId;var likeCount = e.target.nextElementSibling;// 检查用户是否已经点赞var xhr = new XMLHttpRequest();xhr.open('GET', 'check_like.php?post_id=' + post_id, true);xhr.onload = function() {var response = JSON.parse(xhr.responseText);// 如果用户已经点赞,则取消点赞if (response.liked) {xhr = new XMLHttpRequest();xhr.open('GET', 'unlike.php?post_id=' + post_id, true);xhr.onload = function() {// 更新点赞计数likeCount.innerHTML = parseInt(likeCount.innerHTML)- 1;};xhr.send();} else {// 如果用户未点赞,则点赞xhr = new XMLHttpRequest();xhr.open('GET', 'like.php?post_id=' + post_id, true);xhr.onload = function() {// 更新点赞计数likeCount.innerHTML = parseInt(likeCount.innerHTML) + 1;};xhr.send();}};xhr.send(); }); }
以上代码假设您已经创建了必要的数据库表和 PHP 脚本来处理点赞操作。
就这样!现在您的网站上已经有了一个点赞按钮。用户可以使用该按钮来表达他们对您的内容的欣赏。
版权声明
本文仅代表作者观点,不代表任何立场。
本文系作者授权发表,未经许可,不得转载。