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

Posted 2023-02-24

【中文标题】Ajax 登录后动态更新 PHP 生成的元素

【英文标题】：Dynamically update PHP generated elements after Ajax login

【发布时间】：2018-06-29 08:03:29

【问题描述】：

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

简单的方法是不使用 Ajax 登录/退出或刷新页面，因为我检查用户喜欢/不喜欢 php 的内容，如果页面没有得到刷新，这些脚本不会再次触发。

但是如果我刷新页面，所有加载的 cmets 都消失了，用户需要再次滚动。我发现的一种解决方案是使用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_btnbackground-color: green; </style>";
 
?>

因此，如果用户未登录，所有喜欢/不喜欢按钮都是灰色的。现在通过Ajax登录，用户使用电子邮件/用户名和密码登录，登录会话启动用户名，个人资料图像根据用户ID从数据库中选择并显示在页面/导航栏上.现在我需要检查一下用户喜欢什么等等，我应该在 Ajax 响应中进行检查吗？我应该使用load() 来刷新 cmets 的喜欢/不喜欢以及检查它的脚本吗？我应该将所有 php 脚本放在 Ajax 响应中，以便它们在成功登录时触发吗？（我认为女巫是要走的路）

例如：

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

【问题讨论】：

我对你的问题有点困惑。您希望能够保留用户登录后已加载的已加载 cmets？

@JeanPaul98 是的，如果我使用 ajax 登录它可以工作，但我还想更新用户喜欢或不喜欢的 cmets 上的喜欢/不喜欢按钮

如果我没记错的话，您想在 AJAX 请求的响应事件中切换喜欢/不喜欢按钮，并且还想识别喜欢和不喜欢的按钮吗？

你还需要防止双重喜欢吗？

【参考方案1】：

试试下面的代码，

在登录响应中发送一个 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>

如果您需要进一步说明，请随时离开 cmets。