Question

目前我正在尝试为我的网站制作一个带按钮的Like按钮。我遇到的问题是，我不太熟悉javascript和AJAX，也不知道如何正确编写AJAX请求。

Ajax请求确实有效，并且添加了类似的功能（也可以删除）但我必须刷新页面，如果我想再次点击相同或不喜欢。我不能一直点击喜欢和不同。（希望这很有意义）。

这是我的Jquery

 $(document).ready(function(){
    $('.post-add-icon').on('click', function(){
        var id_post = $(this).data('id');
            $post = $(this);

        $.ajax({
            url: 'includes/handlers/addlike.php',
            type: 'post',
            data: {
                'likes': 1,
                'id_post': id_post
            },

            success: function(response){
                $('#likeUpdate-'+id_post).replaceWith(response);


            }
        });
    });
});

</script>
<script>
$(document).ready(function(){
    // when the user clicks on unlike
    $('.post-add-icon-active').on('click', function(){
        var id_post = $(this).data('id');
        $post = $(this);

        $.ajax({
            url: 'includes/handlers/removelike.php',
            type: 'post',
            data: {
                'unliked': 1,
                'id_post': id_post
            },
            success: function(response){
                $('#likeUpdate-'+id_post).replaceWith(response);
            }
        });
    });
});

这是addlike.php

require_once("../../config/db.php");
include_once("../classes/user.php");
include_once('../classes/posts/likes.php');
include_once('../classes/posts/comments.php');
include_once('../classes/posts/shares.php');

if(isset($_POST['likes'])) {
  $id_post = $_POST['id_post'];
  $id_user = $_SESSION['id_user'];
  $likeTotal = mysqli_query($conn, "SELECT * FROM likes where id_post='$id_post'");
  $likeTotalResult = mysqli_num_rows($likeTotal);

  $likeTotalPerUser = mysqli_query($conn, "SELECT * FROM likes WHERE id_user='$id_user' AND id_post='$id_post'");
    $likeTotalPerUserResult = mysqli_num_rows($likeTotalPerUser); 
    if($likeTotalPerUserResult > 0) {
        $likes = new Likes($conn, $id_user);
        $likes->loadLikes($id_post, $id_user);

        $likesPictures = new Likes($conn, $id_user);
        $likesPictures->loadLikerPictureArray($id_post, $id_user);

        $staticCommentCountDisplay = New Comments($conn, $_SESSION[id_user]);
        $staticCommentCountDisplay->DisplayCommentsTotal($id_post);

        $staticShareCountDisplay = New Shares($conn, $_SESSION[id_user]);
        $staticShareCountDisplay->DisplayShares($id_post);
        exit();
    } else {

mysqli_query($conn, "INSERT INTO likes (id_user, id_post, liked) VALUES ('$id_user', '$id_post', '1')");
        $likes = new Likes($conn, $id_user);
        $likes->loadLikes($id_post, $id_user);

        $likesPictures = new Likes($conn, $id_user);
        $likesPictures->loadLikerPictureArray($id_post, $id_user);

        $staticCommentCountDisplay = New Comments($conn, $_SESSION[id_user]);
        $staticCommentCountDisplay->DisplayCommentsTotal($id_post);

        $staticShareCountDisplay = New Shares($conn, $_SESSION[id_user]);
        $staticShareCountDisplay->DisplayShares($id_post);
    exit();
}                               
}

这是展位添加的反应和删除之类的。

    if(mysqli_num_rows($hasUserLiked) > 0){

        echo $likeEcho = '<div class="post-additional-info inline-items" id="likeUpdate-'. $id_post .'">
                            <span id="likeUpdate'. $id_post .'"><a style="cursor:pointer" class="post-add-icon-active inline-items" id="' .$id_post. '" data-id="' .$id_post. '">
                                <svg class="olymp-heart-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                        </svg>
                                        <span class="likes_count" id="' .$id_post. '">' .$totalLikes. '</span>
                                        </a>
                                        </span>';

                                } else { 

        echo $likeEcho = '<div class="post-additional-info inline-items" id="likeUpdate-' . $id_post . '">
                            <span id="likeUpdate'. $id_post .'"><a style="cursor:pointer" class="post-add-icon inline-items" id="' .$id_post. '" data-id="' .$id_post. '">
                                <svg class="olymp-heart-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                    </svg>
                                    <span class="likes_count" id="' .$id_post. '">' .$totalLikes. '</span>
                                    </a>
                                    </span>';

                                }
                            }

最后，这是我的帖子循环开头的脚本切换。

                <script>
                    function toggle<?php echo $row['id_post']; ?>() {
                        var element = document.getElementById("toggleComment<?php echo $row['id_post'];?>");

                        if (element.style.display == "block") 
                             element.style.display = "none";
                        else
                            element.style.display = "block";
                    }
                </script>

希望这是足够的信息。就像我最初说的那样，如果用户点击一次“喜欢”按钮，它会显示正确的相应响应。但是如果用户然后决定再次点击同一个按钮（由于响应而显示为新按钮），则它什么都不做。是否需要使用响应重新加载jquery切换？

Answer 1

我相信你发送的是：

'likes':'1'

这意味着你总是喜欢+1。你根本不应该发送喜欢的数量。您应该发送类似“喜欢”的内容，并且您的后端应该执行类似

的操作

previousNumberOfLikes++ // increment by 1.

你永远不应该从前端接受这种价值，因为它很容易被操纵。

最佳，

编辑：

我可能弄错了。您正在返回totalLikes。这可能是个问题。如果你总是发送totalLikes而不增加它，它将永远不会改变。也许看看这个。

Answer 2

您正在生成新的post-add-icon所以它不在$(document).ready()上，尝试不更换像icon

Answer 3

我认为您需要取消绑定该事件，请关注官方jquery网站： From answer here

Answer 4

您必须只编写一次document.ready函数，而不是多次。将所有函数放在document.ready中，如下所示：

<script>

$(document).ready(function(){

    $('.post-add-icon').on('click', function(){
        var id_post = $(this).data('id');
            $post = $(this);

        $.ajax({
            url: 'includes/handlers/addlike.php',
            type: 'post',
            data: {
                'likes': 1,
                'id_post': id_post
            },

            success: function(response){
                $('#likeUpdate-'+id_post).replaceWith(response);


            }
        });
    });


    // when the user clicks on unlike
    $('.post-add-icon-active').on('click', function(){
        var id_post = $(this).data('id');
        $post = $(this);

        $.ajax({
            url: 'includes/handlers/removelike.php',
            type: 'post',
            data: {
                'unliked': 1,
                'id_post': id_post
            },
            success: function(response){
                $('#likeUpdate-'+id_post).replaceWith(response);
            }
        });
    });
});
</script>

Answer 5

试试这个！

<script>

$(document).ready(function(){

$('body').on('click','.post-add-icon', function(){
    var id_post = $(this).data('id');
        $post = $(this);

    $.ajax({
        url: 'includes/handlers/addlike.php',
        type: 'post',
        data: {
            'likes': 1,
            'id_post': id_post
        },

        success: function(response){
            $('#likeUpdate-'+id_post).replaceWith(response);


        }
    });
});


// when the user clicks on unlike
$('body').on('click','.post-add-icon-active', function(){
    var id_post = $(this).data('id');
    $post = $(this);

    $.ajax({
        url: 'includes/handlers/removelike.php',
        type: 'post',
        data: {
            'unliked': 1,
            'id_post': id_post
        },
        success: function(response){
            $('#likeUpdate-'+id_post).replaceWith(response);
        }
    });
});

}）;

JQuery .on（'点击'）只工作一次，而不是多次

5 个答案: