我试图在我的社交网站的帖子上制作喜欢/不喜欢的系统,每个帖子都有一个pid(自动增量)。我运行一个while循环,从数据库中取出帖子并显示它,并在每个帖子下面给出喜欢/不喜欢的选项。我没有使用任何输入单选按钮或复选框按钮,而是使用了一个图标,单击时颜色应该更改,并且在同一个图标上使用onclick事件调用AJAX函数。
AJAX函数应该转到文件likes.php,其中对具有该post id的行进行搜索,并且该行的likes列被更新或递增1,然后echo返回结果。所有这一切都应该有效但不起作用。
AJAX函数将post id(pid)作为参数传递给likes.php,其中对应于该post id的like字段递增。每个帖子的相似图标都被分配了一个id = post id,以便选择那个点击的按钮,并在AJAX函数中传递post id。结果返回到具有id =“like”+ post pid的span元素。
index.php - 显示帖子和类似按钮
$q = $conn->prepare("SELECT * FROM posts ORDER BY pid DESC");
$q->execute();
while($row = $q->fetch(PDO::FETCH_ASSOC)) {
#my post representation using div and all...
#like/dislike button
<span class=\"right floated\" id=\"like".$row['pid']."\" >
<i id=\"".$row['pid']."\" class=\"heart icon\" onclick=\"like(".$row['pid'].")\"></i>
</span>
}
Ajax的功能 'a'是参数局部变量
<script>
$(document).ready(function(){
function like(a) {
$("#"+a).css('color','red');
$.ajax({
url: "likes.php",
data: ({pid: a}),
type: "POST",
success:function(data){
$("#like"+a).html(data);
},
error:function (){}
});
}
});
}
</script>
likes.php文件
<?php
session_start();
include 'db.php';
$j =$_POST['pid'];
$sql = "UPDATE posts SET likes = likes +1 WHERE pid ='" . $j . "'";
$r = $conn->prepare($sql);
$r->execute();
$sql = "SELECT * FROM posts WHERE pid ='" . $j . "'";
$r = $conn->prepare($sql);
$r->execute();
$ry=$r->fetch();
if($r)
{
echo $ry['likes'];
}
?>
请告诉我为什么不起作用;至少它应该使用onclick检测图标点击,但我认为即使这不起作用。 AJAX函数没有被执行,因为点击没有任何反应。
答案 0 :(得分:0)
这里的问题是,您在like
内声明document ready
函数,因此在该范围之外您的函数未定义。
可行的解决方案:
document ready
范围document ready
.click
(或.on('click',
)代替onClick html属性来调用您的函数 在document ready
范围
脚本:
function like(a) {
$("#" + a).css('color','red');
$.ajax({
url: "likes.php",
data: {pid: a},
type: "POST",
success:function(data){
$("#like" + a).html(data);
},
error:function (){}
});
}
在document ready
var like;
$(document).ready(function(){
like = function(a) {
$("#" + a).css('color','red');
$.ajax({
url: "likes.php",
data: {pid: a},
type: "POST",
success:function(data){
$("#like"+a).html(data);
},
error:function (){}
});
}
});
(这可能会导致一些问题,因为在文档未准备好之前,此功能无法正常工作)
使用jQuery .click
(或.on('click',
)代替onClick html属性来调用您的函数
的index.php
<span class=\"right floated\" id=\"like".$row['pid']."\" >
<i id=\"".$row['pid']."\" class=\"heart icon action-like\"></i>
</span>
脚本
$('.action-like').on('click', function(){
var pid = $(this).attr('id');
$("#" + pid).css('color','red');
$.ajax({
url: "likes.php",
data: {pid: pid},
type: "POST",
success:function(data){
$("#like" + a).html(data);
},
error:function (){}
});
});
这应该有效。但是使用mysqli代替mysql并且不要像你那样将参数传递给查询(阅读 sql injection )。并且不要回显长静态字符串而是关闭php标记并在需要时打开以回显动态数据。