Ajax 成功后如何在喜欢和不喜欢之间切换？
How to toggle between like and unlike on Ajax success?
我的代码可以正常地从数据库中插入或删除类似的内容。刷新页面后，它将正确显示。但是，我怎样才能让它在点击时切换？我在网上搜索并尝试了解决方案，但 none 有效。
这是我的代码：
// PHP CODE TO SEE IF USER ALREADY LIKES VIDEO
<?php
$query272 = "SELECT * FROM video_likes WHERE video_id = :video_id272 AND user_id = :user_id272";
$stmt272 = $pdo->prepare($query272);
$stmt272->bindValue(':video_id272',$id123);
$stmt272->bindValue(':user_id272',$userID);
$stmt272->execute();
$count272 = $stmt272->rowCount();
if($count272 > 0) { $you_like_this = 1; } else { $you_dont_like_this = 1; }
if($you_dont_like_this == 1) {
?>
Ajax代码
<script>
$(function() {
$('#insertLike').click(function () {
var videoID271 = $('#id').val();
var userID271 = $('#userID').val();
console.log('starting ajax');
$.ajax({
url: "./insert-like.php",
type: "post",
data: { id: videoID271, userID: userID271 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
赞按钮形式：
<div style="float:left;margin-right:12px" id="like">
<input type="hidden" name="id" id="id" value="<?php echo $id123; ?>" />
<input type="hidden" name="userID" id="userID" value="<?php echo $userID; ?>" />
<input type="hidden" name="you_like_this" id="you_like_this" value="1" />
<button onclick="insertLike(this)" class="insertLike" id="insertLike" style="background:none;border:none;text-decoration:none; color:#DD4400;font-weight:bold">Like</button>
</div>
<?php } else { ?>
不喜欢按钮 Ajax:
<script>
$(function () {
$('#deleteLike').click(function () {
var unlikeVideoID272 = $('#unlikeVideoID').val();
var unlikeUserID272 = $('#unlikeUserID').val();
console.log('starting ajax');
$.ajax({
url: "./delete-like.php",
type: "post",
data: { unlikeVideoID: unlikeVideoID272, unlikeUserID: unlikeUserID272 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
不喜欢表单：
<div style="float:left;margin-right:12px" id="unlike">
<input type="hidden" name="unlikeVideoID" id="unlikeVideoID" value="<?php echo $id123; ?>" />
<input type="hidden" name="unlikeUserID" id="unlikeUserID" value="<?php echo $userID; ?>" />
<button onclick="deleteLike(this)" class="deleteLike" id="deleteLike" style="background:none; border:none; text-decoration:none; color:#DD4400; font-weight:bold">Unlike</button>
</div>
PHP关闭：
<?php } ?>
编辑（根据要求）：
Table users Table likes Table videos
user_id <------- user_id -------> user_id
likes
video_id ------> id
不使用不喜欢。相反，使用喜欢和不喜欢（当你已经喜欢它时，你可以改变主意和不喜欢它）。 Unlike 将简单地从 table.
中删除 like
再一次，插入数据库工作正常。我只需要在 Ajax 成功 200 之后将喜欢这个词更改为不喜欢这个词。好吧，不仅仅是这个词。剧本也是。当喜欢变成不喜欢时，点击不喜欢应该再次喜欢视频。好像有人是躁郁症并且不断改变他们的情绪/观点。想想 Facebook 的点赞按钮。你点击它。它喜欢post。你再点一下，它不像post。无需刷新页面。
第一步：规划数据库
根据您的 select 查询，我了解到这里涉及 3 个表：
Video Video_Likes User
video_id --> video_id
user_id <--- user_id
- 要查找视频的总点赞数，可以
select count(user_id) from video_likes where video_id=?
- 要了解用户是否喜欢某个视频，我们可以简单地
select * from video_likes where user_id=? and video_id=?
但是，如果你真的不喜欢，那是行不通的。在那种情况下，我们需要添加另一个字段 video_likes:
Video Video_Likes User
video_id --> video_id
user_id <--- user_id
affinity
其中亲和力= 'Like' | 'Dislike'（我更喜欢使用人类可读的值而不是 'L' | 'D'）
现在，查询将是
select count(user_id) from video_likes where video_id=? and affinity=? 喜欢或不喜欢的计数select affinity from video_likes where user_id=? and video_id=? 了解用户是否喜欢视频
note: there should be a unique key over video_id and user_id; you can't have more than one status for each video/user combination
第 2 步：计划演示
添加几个基本字段：
Video Video_Likes User
video_id --> video_id
title user_id <--- user_id
affinity name
简化的脚本，现在省略了大部分 PHP 逻辑
videos.php
<?php
// assuming you already have a PDO object named $pdo...
$sql = "select video.video_id, video.title, likes.total_likes, dislikes.total_dislikes
from Video
left join (
select video_id, count(video_id) total_likes
from Video_Likes
where affinity = :like -- 'Like'
group by video_id
) likes on video.video_id = likes.video_id
left join (
select video_id, count(video_id) total_dislikes
from Video_Likes
where affinity = :dislike -- 'Dislike'
group by video_id
) dislikes on video.video_id = likes.video_id
order by video.title";
$stmt = $pdo->prepare($sql);
$stmt->execute(['like'=>'Like','dislike'=>'Dislike']);
// This is the end of all the PHP logic.
// Now, we will output the view. No more PHP except iteration, variable substitution and minor conditionals
?>
<html>
<head><title>Sample</title></head>
<body>
<h1>Video List</h1>
<table>
<tr>
<th>Video</th>
<th>Likes</th>
<th>Dislikes</th>
</tr>
<?php foreach($stmt as $row): ?>
<tr>
<td><?= htmlentities($row['title']) ?></td>
<td><?= htmlentities($row['likes']) ?? 'No Votes' ?></td>
<td><?= htmlentities($row['dislikes']) ?? 'No Votes' ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>
第 3 步：计划 javascript
假设页面中加载了JQuery（上面未显示），添加ajax transport
就目前而言，没有钩子也没有任何方法可以将信息传输到 ajax。通过添加 class 和数据属性修复它：
<?php foreach($stmt as $row): ?>
<tr>
<td><?= $row['title'] ?></td>
<td class="video-like" data-video-id="<?= $row['video_id'] ?>">
<?= $row['likes'] ?? 'No Votes' ?>
</td>
<td class="video-dislike" data-video-id="<?= $row['video_id'] ?>">
<?= $row['dislikes'] ?? 'No Votes' ?>
</td>
</tr>
<?php endforeach; ?>
现在，在 </body> 标签之前创建几个监听器和一个 ajax 函数：
<script>
// assign this from php
var user_id = "<?= $user_id ?>";
// the document ready section is not strictly needed, but doesn't hurt...
$( document ).ready() {
$('.video-like').on('click', function() {
var video_id = $(this).data('video-id'); // may be data('videoId')
setAffinity(video_id, 'Like');
});
$('.video-dislike').on('click', function() {
var video_id = $(this).data('video-id'); // may be data('videoId')
setAffinity(video_id, 'Dislike');
});
// close document ready
}
function setAffinity(video_id, affinity) {
$.ajax({
url: "./videos.php",
type: "post",
data: { user_id: user_id, video_id: video_id, affinity: affinity },
success: function (data) {
if(data.status == 'success') {
// do something
} else {
// do something else
}
}
});
}
</script>
第 4 步：PHP 从 ajax 接收数据并响应
在获取页面数据 ($sql = "select video.video_id, video.title, likes.total_likes, dislikes.total_dislikes ...") 的逻辑之前，检查 POST 提交。这就是将 REST 事务落实到位。
<?php
// assuming you have managed user login and saved user_id in session
session_start();
$user_id = $_SESSION['user_id'] ?? false;
// if there is a POST submission, we know a change to data is being requested.
if($user_id && array_key_exists('video_id',$_POST)) {
// we are returning JSON; there can be no output before this. That's why this is the first order of business.
header("Content-type:application/json");
// early exit on data validation failure
if( !is_numeric($_POST['video_id'] ) {
print json_encode( ['status'=>'failed', 'message'=>'Invalid video selected'] );
die;
}
$video_id = $_POST['video_id'];
// early exit on data validation failure
if( !in_array( ['Like','Dislike'], $_POST['affinity'] ) {
print json_encode( ['status'=>'failed', 'message'=>'You must select Like or Dislike'] );
die;
}
$affinity = $_POST['affinity'];
$sql = "insert into video_likes (video_id, user_id, affinity) values(?,?,?)";
$stmt = $pdo->prepare($sql);
$success = $stmt->execute( [$video_id, $user_id, $affinity] );
// early exit on failure
if(!$success) {
print json_encode( ['status'=>'failed','message'=>'Your selection was not recorded'] );
die;
}
// let's send back the new count of likes and dislikes
$sql = "select count(user_id) total from video_likes where video_id=? and affinity=?";
$stmt= $pdo->prepare($sql);
$stmt->execute([$video_id, 'Likes']);
$likes = $stmt->fetchColumn();
$stmt->execute([$video_id, 'Dislikes']);
$dislikes = $stmt->fetchColumn();
print json_encode( ['status'=>'success', 'likes'=>$likes, 'dislikes'=>$dislikes] );
die;
}
// continue with the page presentation as above...
第 5 步：在浏览器中接收 PHP 响应
返回 javascript 函数 setAffinity()...
function setAffinity(video_id, affinity) {
$.ajax({
url: "./videos.php",
type: "post",
data: { user_id: user_id, video_id: video_id, affinity: affinity },
success: function (data) {
if(data.status == 'success') {
// you will receive back {data: 'success', likes: $likes, dislikes: $dislikes}
// locate the affected row and update the values
// you may have to create an id for each like and dislike if this doesn't work...
$('.video-like[data-video-id="' +data.likes+ '"]').html(data.likes);
$('.video-dislike[data-video-id="' +data.dislikes+ '"]').html(data.likes);
} else {
alert(data.message);
}
}
});
}
我的代码可以正常地从数据库中插入或删除类似的内容。刷新页面后，它将正确显示。但是，我怎样才能让它在点击时切换？我在网上搜索并尝试了解决方案，但 none 有效。
这是我的代码：
// PHP CODE TO SEE IF USER ALREADY LIKES VIDEO
<?php
$query272 = "SELECT * FROM video_likes WHERE video_id = :video_id272 AND user_id = :user_id272";
$stmt272 = $pdo->prepare($query272);
$stmt272->bindValue(':video_id272',$id123);
$stmt272->bindValue(':user_id272',$userID);
$stmt272->execute();
$count272 = $stmt272->rowCount();
if($count272 > 0) { $you_like_this = 1; } else { $you_dont_like_this = 1; }
if($you_dont_like_this == 1) {
?>
Ajax代码
<script>
$(function() {
$('#insertLike').click(function () {
var videoID271 = $('#id').val();
var userID271 = $('#userID').val();
console.log('starting ajax');
$.ajax({
url: "./insert-like.php",
type: "post",
data: { id: videoID271, userID: userID271 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
赞按钮形式：
<div style="float:left;margin-right:12px" id="like">
<input type="hidden" name="id" id="id" value="<?php echo $id123; ?>" />
<input type="hidden" name="userID" id="userID" value="<?php echo $userID; ?>" />
<input type="hidden" name="you_like_this" id="you_like_this" value="1" />
<button onclick="insertLike(this)" class="insertLike" id="insertLike" style="background:none;border:none;text-decoration:none; color:#DD4400;font-weight:bold">Like</button>
</div>
<?php } else { ?>
不喜欢按钮 Ajax:
<script>
$(function () {
$('#deleteLike').click(function () {
var unlikeVideoID272 = $('#unlikeVideoID').val();
var unlikeUserID272 = $('#unlikeUserID').val();
console.log('starting ajax');
$.ajax({
url: "./delete-like.php",
type: "post",
data: { unlikeVideoID: unlikeVideoID272, unlikeUserID: unlikeUserID272 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
不喜欢表单：
<div style="float:left;margin-right:12px" id="unlike">
<input type="hidden" name="unlikeVideoID" id="unlikeVideoID" value="<?php echo $id123; ?>" />
<input type="hidden" name="unlikeUserID" id="unlikeUserID" value="<?php echo $userID; ?>" />
<button onclick="deleteLike(this)" class="deleteLike" id="deleteLike" style="background:none; border:none; text-decoration:none; color:#DD4400; font-weight:bold">Unlike</button>
</div>
PHP关闭：
<?php } ?>
编辑（根据要求）：
Table users Table likes Table videos
user_id <------- user_id -------> user_id
likes
video_id ------> id
不使用不喜欢。相反，使用喜欢和不喜欢（当你已经喜欢它时，你可以改变主意和不喜欢它）。 Unlike 将简单地从 table.
中删除 like再一次，插入数据库工作正常。我只需要在 Ajax 成功 200 之后将喜欢这个词更改为不喜欢这个词。好吧，不仅仅是这个词。剧本也是。当喜欢变成不喜欢时，点击不喜欢应该再次喜欢视频。好像有人是躁郁症并且不断改变他们的情绪/观点。想想 Facebook 的点赞按钮。你点击它。它喜欢post。你再点一下，它不像post。无需刷新页面。
第一步：规划数据库
根据您的 select 查询，我了解到这里涉及 3 个表：
Video Video_Likes User
video_id --> video_id
user_id <--- user_id
- 要查找视频的总点赞数，可以
select count(user_id) from video_likes where video_id=? - 要了解用户是否喜欢某个视频，我们可以简单地
select * from video_likes where user_id=? and video_id=?
但是，如果你真的不喜欢，那是行不通的。在那种情况下，我们需要添加另一个字段 video_likes:
Video Video_Likes User
video_id --> video_id
user_id <--- user_id
affinity
其中亲和力= 'Like' | 'Dislike'（我更喜欢使用人类可读的值而不是 'L' | 'D'）
现在，查询将是
select count(user_id) from video_likes where video_id=? and affinity=?喜欢或不喜欢的计数select affinity from video_likes where user_id=? and video_id=?了解用户是否喜欢视频
note: there should be a unique key over video_id and user_id; you can't have more than one status for each video/user combination
第 2 步：计划演示
添加几个基本字段：
Video Video_Likes User
video_id --> video_id
title user_id <--- user_id
affinity name
简化的脚本，现在省略了大部分 PHP 逻辑
videos.php
<?php
// assuming you already have a PDO object named $pdo...
$sql = "select video.video_id, video.title, likes.total_likes, dislikes.total_dislikes
from Video
left join (
select video_id, count(video_id) total_likes
from Video_Likes
where affinity = :like -- 'Like'
group by video_id
) likes on video.video_id = likes.video_id
left join (
select video_id, count(video_id) total_dislikes
from Video_Likes
where affinity = :dislike -- 'Dislike'
group by video_id
) dislikes on video.video_id = likes.video_id
order by video.title";
$stmt = $pdo->prepare($sql);
$stmt->execute(['like'=>'Like','dislike'=>'Dislike']);
// This is the end of all the PHP logic.
// Now, we will output the view. No more PHP except iteration, variable substitution and minor conditionals
?>
<html>
<head><title>Sample</title></head>
<body>
<h1>Video List</h1>
<table>
<tr>
<th>Video</th>
<th>Likes</th>
<th>Dislikes</th>
</tr>
<?php foreach($stmt as $row): ?>
<tr>
<td><?= htmlentities($row['title']) ?></td>
<td><?= htmlentities($row['likes']) ?? 'No Votes' ?></td>
<td><?= htmlentities($row['dislikes']) ?? 'No Votes' ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>
第 3 步：计划 javascript
假设页面中加载了JQuery（上面未显示），添加ajax transport
就目前而言，没有钩子也没有任何方法可以将信息传输到 ajax。通过添加 class 和数据属性修复它：
<?php foreach($stmt as $row): ?>
<tr>
<td><?= $row['title'] ?></td>
<td class="video-like" data-video-id="<?= $row['video_id'] ?>">
<?= $row['likes'] ?? 'No Votes' ?>
</td>
<td class="video-dislike" data-video-id="<?= $row['video_id'] ?>">
<?= $row['dislikes'] ?? 'No Votes' ?>
</td>
</tr>
<?php endforeach; ?>
现在，在 </body> 标签之前创建几个监听器和一个 ajax 函数：
<script>
// assign this from php
var user_id = "<?= $user_id ?>";
// the document ready section is not strictly needed, but doesn't hurt...
$( document ).ready() {
$('.video-like').on('click', function() {
var video_id = $(this).data('video-id'); // may be data('videoId')
setAffinity(video_id, 'Like');
});
$('.video-dislike').on('click', function() {
var video_id = $(this).data('video-id'); // may be data('videoId')
setAffinity(video_id, 'Dislike');
});
// close document ready
}
function setAffinity(video_id, affinity) {
$.ajax({
url: "./videos.php",
type: "post",
data: { user_id: user_id, video_id: video_id, affinity: affinity },
success: function (data) {
if(data.status == 'success') {
// do something
} else {
// do something else
}
}
});
}
</script>
第 4 步：PHP 从 ajax 接收数据并响应
在获取页面数据 ($sql = "select video.video_id, video.title, likes.total_likes, dislikes.total_dislikes ...") 的逻辑之前，检查 POST 提交。这就是将 REST 事务落实到位。
<?php
// assuming you have managed user login and saved user_id in session
session_start();
$user_id = $_SESSION['user_id'] ?? false;
// if there is a POST submission, we know a change to data is being requested.
if($user_id && array_key_exists('video_id',$_POST)) {
// we are returning JSON; there can be no output before this. That's why this is the first order of business.
header("Content-type:application/json");
// early exit on data validation failure
if( !is_numeric($_POST['video_id'] ) {
print json_encode( ['status'=>'failed', 'message'=>'Invalid video selected'] );
die;
}
$video_id = $_POST['video_id'];
// early exit on data validation failure
if( !in_array( ['Like','Dislike'], $_POST['affinity'] ) {
print json_encode( ['status'=>'failed', 'message'=>'You must select Like or Dislike'] );
die;
}
$affinity = $_POST['affinity'];
$sql = "insert into video_likes (video_id, user_id, affinity) values(?,?,?)";
$stmt = $pdo->prepare($sql);
$success = $stmt->execute( [$video_id, $user_id, $affinity] );
// early exit on failure
if(!$success) {
print json_encode( ['status'=>'failed','message'=>'Your selection was not recorded'] );
die;
}
// let's send back the new count of likes and dislikes
$sql = "select count(user_id) total from video_likes where video_id=? and affinity=?";
$stmt= $pdo->prepare($sql);
$stmt->execute([$video_id, 'Likes']);
$likes = $stmt->fetchColumn();
$stmt->execute([$video_id, 'Dislikes']);
$dislikes = $stmt->fetchColumn();
print json_encode( ['status'=>'success', 'likes'=>$likes, 'dislikes'=>$dislikes] );
die;
}
// continue with the page presentation as above...
第 5 步：在浏览器中接收 PHP 响应
返回 javascript 函数 setAffinity()...
function setAffinity(video_id, affinity) {
$.ajax({
url: "./videos.php",
type: "post",
data: { user_id: user_id, video_id: video_id, affinity: affinity },
success: function (data) {
if(data.status == 'success') {
// you will receive back {data: 'success', likes: $likes, dislikes: $dislikes}
// locate the affected row and update the values
// you may have to create an id for each like and dislike if this doesn't work...
$('.video-like[data-video-id="' +data.likes+ '"]').html(data.likes);
$('.video-dislike[data-video-id="' +data.dislikes+ '"]').html(data.likes);
} else {
alert(data.message);
}
}
});
}