具有数据ID的Ajax成功功能

Question

我有一个供稿页面，该页面为供稿上的每个帖子加载了一个单独的feedLikes.php 。 目前，我可以喜欢每个帖子，并且可以使用Ajax更新喜欢的帖子。 但是，每次更新赞时，它都会返回到供稿的顶部。 以下是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页面，而不仅仅是我喜欢的一篇帖子。 但是，我似乎无法弄清楚我需要使用什么成功功能来更新一篇文章，而不是将我带回到提要的顶部。

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

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

然后在ajax中成功使用此行：

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

但是，这只会删除所有内容，并且不会更新。 除了其他功能之外，我还尝试了相同的操作，但没有使用data-id。

Answer 1

到那里，您可以在此处看到示例，我必须演示如何对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如果已设置dataType则不需要解析响应），否则应使用var myData=$.parseJSON(data); 然后使用like myData.likes myData.success

具有数据ID的Ajax成功功能

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-11-20 16:38:04

具有数据ID的Ajax成功功能

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-11-20 16:38:04

解决方案1
1 已采纳 2017-11-20 16:38:04