我的代码

Question

我试图在我的社交网站的帖子上制作喜欢/不喜欢的系统，每个帖子都有一个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函数没有被执行，因为点击没有任何反应。

Answer 1

这里的问题是，您在like内声明document ready函数，因此在该范围之外您的函数未定义。

可行的解决方案：

在document ready范围
在document ready
使用jQuery .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

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标记并在需要时打开以回显动态数据。

就像使用AJAX，jQuery和PHP的系统一样

我的代码

1 个答案: