Fatal编程技术网
  • javascript/
  • Javascript 具有数据id的Ajax成功函数

Javascript 具有数据id的Ajax成功函数

javascript php jquery html ajax

Javascript 具有数据id的Ajax成功函数,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一个提要页面，为提要上的每个帖子加载一个单独的feedLikes.php。目前，我可以喜欢每一篇文章，它使用Ajax更新喜欢的内容。但是，每次更新like时，它都会返回到提要的顶部。下面是feedLikes.php if (isset($_POST['feedID'])) { $feedID = ($_POST['feedID']); $findHasUserLiked = $pdo->prepare('SELECT username FROM feedLikes WH

我有一个提要页面，为提要上的每个帖子加载一个单独的
feedLikes.php
。目前，我可以喜欢每一篇文章，它使用Ajax更新喜欢的内容。但是，每次更新like时，它都会返回到提要的顶部。下面是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>';
}


然后在ajax成功案例中，使用这一行：


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



然而，这只会删除所有内容，不会更新。我也尝试过同样的方法，但没有使用数据id和其他东西。
你可以看到这个例子，我必须展示如何对
ajax
响应进行编码，所以我在我的域中添加了这个例子

您的
PHP
文件如下所示，我省略了
SQL
部分，只添加了关于如何使用数组的
json\u 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>




.饲料{
宽度：95%；
高度：自动；
}
i、 fa{
光标：指针；
}
$（文档）.ready（函数（）{
$（“.voteup”）。单击（函数（）{
var curElement=$（此值）；
console.log（curElement.parent（）.find（'.likes'）.text（））；
$.ajax({
url:'test.php'，
数据类型：“json”，
数据：“count=”+curElement.parent（）.find（“.likes”）.text（），
方法：“发布”
}).完成（功能（数据）{
if（data.success）{
curElement.parent（）.find（“.likes”）.html（data.likes）；
}否则{
警报（'喜欢提要时在服务器上出现一些错误'）；
}
});
});
});
小组标题
这是我的饲料有人喜欢吗

0
0
另一个提要项

0
0
这是我的饲料有人喜欢吗

0
0
这是我的饲料有人喜欢吗

0
0
这是我的饲料有人喜欢吗

0
0
这是我的饲料有人喜欢吗

0
0


编辑：


基本上，我只是增加发布的变量
count
您不必这样做，只需在发送ajax调用后更新数据库中的like，然后使用
SQL
查询进行计数，并以我使用的相同格式显示输出
您会注意到，这里使用的ajax调用将
数据类型设置为
JSON
，如果您设置了
数据类型，则不需要解析响应，否则应该使用
var myData=$.parseJSON（数据）
然后使用like
myData.likes
你需要在喜欢之后计算like，然后手动覆盖提要上显示的like如果你不想只重新加载和更新该提要，你应该使用php文件中的json响应，意味着创建一个数组，将total like放在一个索引上，然后将success true或false放在另一个索引上，然后对该数组使用json_encode并对其进行wcho，然后在readystate函数中使用$.parseJson来解析数据，并将其像data.success，data.likeswow一样使用。我真的很感激所有这些，谢谢你，但是你有没有可能用一些代码来回答这个问题呢。我对这一切都很陌生，不知道如何使用$.parseJson等。好吧，请给我一些时间，我会在我回到我的seatHi@MuhammadOmerAslam时告诉你，很抱歉打扰你。我已经尝试了一些没有用的东西：/是的，我会在一段时间内为你发帖。做一个例子

<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>