Question

我通过Ajax无限滚动在页面上加载内容（评论），我也使用Ajax登录/退出。现在成功登录后，我想根据用户喜欢或不喜欢的内容更新回复或类似按钮。

简单的方法不是使用Ajax进行登录/输出或者无论如何刷新页面，因为我检查用户喜欢/不喜欢PHP的内容，如果页面没有刷新，那么这些脚本不会再次触发。

但如果我刷新页面，所有加载的评论都会消失，用户需要再次滚动。我找到的一个解决方案是使用load()方法用脚本刷新div，但我不确定这是不是可行的方法。那么基本上我如何在从PHP生成的Ajax登录后动态更新页面上的元素？

让我更好地解释一下：

假设我有一个PHP脚本进行此项检查：

<?PHP
 $q = $db->query("SELECT who_liked FROM likes WHERE(com_liked = com_id AND who_liked = curent_user_id)"); //actual query uses prepared statments, this is for example
 $count = $q->rowCount();

 if($count > 0){
  echo "<style> #like_btn{background-color: green;} </style>";
 }
?>

因此，如果用户未登录，则所有喜欢/不喜欢的按钮都是灰色的。现在登录是通过Ajax完成的，用户使用email / user_name和密码登录，启动登录会话，用户名，根据用户ID从数据库中选择配置文件图像，并显示在页面/ navBar上。现在我需要检查一下用户喜欢什么等等，我应该在Ajax响应中进行检查吗？我应该使用load()来刷新评论的喜欢/不喜欢以及检查它的脚本吗？我应该把所有的PHP脚本都放在Ajax响应中，这样他们就可以成功登录吗？（女巫，我认为是要走的路）

前：

    ,success: function(response) {// php scripts with the sql query for all the checks}

Answer 1

尝试以下代码，

在Login响应中发送JSON编码数组，

<?PHP

 $q = $db->query("SELECT who_liked FROM likes WHERE(com_liked = com_id AND who_liked = curent_user_id)"); //actual query uses prepared statments, this is for example
 $count = $q->rowCount();

 if($count > 0){
  $response = ['success' => true];
 } else {
     $response = ['success' => true];
 }

 echo json_encode($response);

?>

使用下面的CSS脚本，

<style type="text/css">
    .like_btn{
        background-color: green;
    }

    .like_btn.liked {
        background-color: orange;
    }

    .like_btn.not-liked {
        background-color: grey;
    }
</style>

添加

未喜欢

在PHP页面加载时使用CSS类来表示不喜欢的按钮，

<button class="like_btn not-liked">Like Button</button>

然后您将能够识别喜欢/不喜欢和不喜欢的按钮。

使用

喜欢

喜欢按钮的CSS类。因此，您可以随时使用JavaScript切换按钮。

<button class="like_btn liked">Like Button</button>

最后是JQuery AJAX脚本，

<script type="text/javascript">
    $.ajax({
        url: '/path/to/file',
        type: 'default GET (Other values: POST)',
        dataType: 'json',
        data: {param1: 'value1'},
        success:function(res) {
            // On Login Success
            if(res.success) {
                $('.like_btn').toggleClass('not-liked');
            }
        }
    });
</script>

如果您需要进一步说明，请随时发表评论。

在Ajax登录后动态更新PHP生成的元素

1 个答案: