Question

我有一个Feed页面，可以为Feed上的每个帖子加载一个feedLikes.php个人。目前，我可以喜欢每个帖子，并使用Ajax更新喜欢的内容。但是，每次更新时，它都会返回到Feed的顶部。以下是feedLikes.php：

if (isset($_POST['feedID'])) {
    $feedID = ($_POST['feedID']);
    $findHasUserLiked = $pdo->prepare('SELECT username FROM feedLikes WHERE feedID =? and username=?');
    //execute query and variables
    $findHasUserLiked->execute([$feedID, $username]);
    if ($findHasUserLiked->rowCount() > 0) {
        $hasUserLiked = $findHasUserLiked->fetchColumn();
        echo <<<_END
        <form action="feedLikes.php" id="unlikePostForm$feedID" method="post">
        <button type="submit" class="unLikeButton"></button>
        <input type="hidden" name="feedIDForUnlike" class="feedIDForUnlike$feedID" value="$feedID">
        </form>
_END;

        ?>
        <script type="text/javascript">
        $(document).ready(function () {
            $('#likePostForm<?php echo $feedID ?>').on('submit', function (e) {
                e.preventDefault();
                var feedIDLike = $(".feedIDForLike<?php echo $feedID ?>").val();
                $.ajax({
                    url: "feedLikesClicked.php",
                    cache: false,
                    type: "POST",
                    data: {
                        feedIDLike: feedIDLike
                    },
                    dataType: "html",
                    success: function (html) {
                        location.reload();
                    }
                });
            });
        });
        </script>
<?php
} else {
        echo <<<_END
        <form action="feedLikes.php" id="likePostForm$feedID" method="post">
        <button type="submit" class="likeButton"></button>
        <input type="hidden" name="feedIDForLike" class="feedIDForLike$feedID" value="$feedID">
        </form>
_END;
        ?>
        <script type="text/javascript">
        $(document).ready(function () {
            $('#likePostForm<?php echo $feedID ?>').on('submit', function (e) {
                e.preventDefault();
                var feedIDLike = $(".feedIDForLike<?php echo $feedID ?>").val();
                $.ajax({
                    url: "feedLikesClicked.php",
                    cache: false,
                    type: "POST",
                    data: {
                        feedIDLike: feedIDLike
                    },
                    dataType: "html",
                    success: function (html) {
                        location.reload();
                    }
                });
            });
        });
        </script>
<?php
}
    $likesNumber = $pdo->prepare('SELECT count(*) FROM feedLikes WHERE feedID =?');
    //execute query and variables
    $likesNumber->execute([$feedID]);
    $numberOfLikes = $likesNumber->fetchColumn();
    print '<div class=numberOfLikes data-id="' . $feedID . '">
            <p>' . $numberOfLikes . '</p>
        </div>';
}

我知道这是因为location.reload()实际上正在重新加载所有feedLikes.php页面，而不仅仅是我喜欢的一个帖子。但是，我似乎无法弄清楚我需要使用哪个成功函数来更新一个帖子而不是让我回到Feed的顶部。

我尝试将feedLikes.php中的所有内容放在div中，如下所示：

<div class=allLikesPage data-id="'.$feedID .'">

然后在ajax成功使用这一行：

$('.allLikesPage[data-id='"+ feedID +"']').load(document.URL +  ' .allLikesPage[data-id='"+ feedID +"']');

然而，这只会删除所有内容而不会更新。我也尝试过没有data-id等同样的东西。

Answer 1

你去了，你可以看到示例here我必须展示ajax响应应该如何编码所以我在我的域中添加了示例

您的PHP文件将如下所示，我省略了SQL部分，并且仅添加了有关如何使用数组的json_encode的逻辑，希望您发现它对您有帮助在本地计算机上使用此代码来查看事情是如何工作的

<?php 
$response   =   array('success'=>false,'likes'=>0);


if(isset($_POST['count'])){
    $counter =   $_POST['count'];
    $response['likes']=$counter+1;
    $response['success']=true;
}

echo json_encode($response);
?>

您的HTML页面位于

之下

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .feed {
            width: 95%;
            height: auto;
        }

        i.fa {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".voteup").click(function () {
                var curElement = $(this);
console.log(curElement.parent().find('.likes').text());
                $.ajax({
                    url: 'test.php',
                    dataType: 'json',
                    data: 'count=' + curElement.parent().find(".likes").text(),
                    method: 'POST'
                }).done(function (data) {
                    if (data.success) {
                        curElement.parent().find(".likes").html(data.likes);
                    } else {
                        alert('Some Error occoured at the server while liking the feed');
                    }
                });
            });
        });
    </script>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">
            <div class="feed">
                <p>This is my feed can someone like it</p>
                <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
                <span class="likes">0</span>
                <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
                <span class="dlikes">0</span>
            </div>
            <div class="feed">
                <p>Another feed item</p>
                <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
                <span class="likes">0</span>
                <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
                <span class="dlikes">0</span>
            </div>
            <div class="feed">
                <p>This is my feed can someone like it</p>
                <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
                <span class="likes">0</span>
                <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
                <span class="dlikes">0</span>
            </div>
            <div class="feed">
                <p>This is my feed can someone like it</p>
                <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
                <span class="likes">0</span>
                <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
                <span class="dlikes">0</span>
            </div>
            <div class="feed">
                <p>This is my feed can someone like it</p>
                <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
                <span class="likes">0</span>
                <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
                <span class="dlikes">0</span>
            </div>
            <div class="feed">
                <p>This is my feed can someone like it</p>
                <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
                <span class="likes">0</span>
                <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
                <span class="dlikes">0</span>
            </div>
        </div>
    </div>


</body>


</html>

编辑：

基本上，我只是递增已发布的变量count您不必这样做，只需在发送ajax调用后更新数据库中的喜欢，然后使用SQL查询计数并以我使用的相同格式显示输出。如果您设置了{$.parseJSON()，您会注意到此处使用的ajax调用将dataType设置为JSON 1}}您不需要解析响应，否则您应该使用dataType然后使用var myData=$.parseJSON(data); myData.likes

具有data-id的Ajax成功函数

1 个答案: