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

时间:2016-06-23 14:19:29

标签: javascript php jquery ajax onclick

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

1 个答案:

答案 0 :(得分:0)

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

可行的解决方案:

  • document ready范围
  • 之前声明您的功能
  • document ready
  • 之外创建一个var
  • 使用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标记并在需要时打开以回显动态数据。