【发布时间】：2020-11-12 17:29:12
【问题描述】：
我正在使用 PHP、SQL 和 Ajax 实现一个喜欢/不喜欢按钮。按钮有效，用户最多可以点赞 1 次。
使用 foreach 循环从 SQL 数据库中提取帖子，其中每个项目都由引导卡表示。现在，每次有人按下喜欢/不喜欢按钮时，整个页面都会刷新，让用户迷失在他的轨道上。我想更新只按下喜欢/不喜欢按钮的卡片。
<script type="text/javascript">
$(document).ready(function() {
// when user likes
$('.like').click(function(){
var postid = $(this).attr('id');
$.ajax({
url: 'like.php',
type: 'POST',
async: false,
data: {
'liked': 1,
'postid': postid
},
success:function(){
}
})
});
//when user unlikes
$('.unlike').click(function(){
var postid = $(this).attr('id');
$.ajax({
url: 'like.php',
type: 'POST',
async: false,
data: {
'unliked': 1,
'postid': postid
},
success:function(){
}
})
});
})
</script>
使用以下 PHP/HTML 代码从数据库中获取每张卡片：
<div class="card bg-white mb-2">
<div class="card-body">
<div class="row">
<!-- add title for question/tip -->
<?php
if($item['type'] == 'tip') {
?>
<div class="col-8"><h5 class="card-title text-left"><i class="fa fa-lightbulb-o text-color-policeblue"></i>
<?php
}
elseif ($item['type'] == 'vraag') {
?>
<div class="col-8"><h5 class="card-title text-left"><i class="fa fa-comments text-color-policeblue"></i>
<?php
}
?>
<?php
echo $item['title'];
?>
</h5></div>
<div class="col-4 text-right">
<?php
if ($item['tipRedactie'] == 1) {
?>
<i class="fa fa-check text-color-policeblue"></i>
<?php
}
?>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bookmarks" fill="#004687" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4zm2-1a1 1 0 0 0-1 1v10.566l3.723-2.482a.5.5 0 0 1 .554 0L11 14.566V4a1 1 0 0 0-1-1H4z"/>
<path fill-rule="evenodd" d="M4.268 1H12a1 1 0 0 1 1 1v11.768l.223.148A.5.5 0 0 0 14 13.5V2a2 2 0 0 0-2-2H6a2 2 0 0 0-1.732 1z"/>
</svg>
</div>
</div>
<!-- add name and date -->
<p class="small font-italic text-left mt-n2">
<?php
if ($item['anonymous'] == '1') {
echo 'Anoniem';
}
else {
$userName = getUser($item['userId']);
if ($userName['username'] != '') {
echo($userName['username']);
}
}
?>
·
<?php
echo date('d/m/Y', $item['timestamp']);
?>
</p>
<p class="card-text text-left">
<?php
echo $item['itemText'];
?>
</p>
<p class="small font-italic text-left mt-n2">
<?php
$domains = returnItemDomains($item['id']);
foreach($domains as $domain) {
echo '#'.$domain. ' ';
}
?>
</p>
<div class="row text-left">
<div class="col">
<!-- Message icon -->
<a href="reactions.php?id=<?php echo $item['id']; ?>">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chat-right-fill" fill="#004687" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/>
</svg>
<!-- add number of reactions -->
<?php
$countReactions = count(returnItemReaction($item['id']));
echo $countReactions;
if ($countReactions == 1) {
echo ' reactie';
}
else {
echo ' reacties';
}
?>
</a>
<!-- Upvote icon -->
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-caret-up-fill" fill="#004687" xmlns="http://www.w3.org/2000/svg">
<path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
</svg>
<!-- add number of upvotes -->
<?php
$countLikes = returnItemLikes($item['id']);
echo $countLikes;
$userLikes = getLikeUser($userId, $item['id']);
?>
<a href="" class="like" id="<?php echo $item['id']; ?>">
<?php
if($userLikes == 0) {
if ($countLikes == 1) {
echo ' upvote';
} else {
echo ' upvotes';
}
?>
</a>
<?php
}
else {
?>
<a href="" class="unlike" id="<?php echo $item['id']; ?>">
<?php
echo ' upvotes downvote';
}
?>
</a>
</div>
</div>
</div>
</div>
处理like/unlike查询的like.php页面如下：
<?php
$userId = getUserIdBySessionId($_COOKIE['SESSIONID']);
if (isset($_POST['liked'])) {
$postid = $_POST['postid'];
insertLikeItem($userId, $postid);
}
if (isset($_POST['unliked'])) {
$postid = $_POST['postid'];
deleteLikeItem($userId, $postid);
}
?>
【问题讨论】：