使用 Ajax 在 Div 单击上更新 MYSQL 表 - 没有页面刷新？

Question

我有一个名为用户的 MYSQL 表。我还有一个名为 online_status 的列。

在我的页面上，我希望用户能够将他们的状态切换为“在线”或“离线”，并在他们使用 Ajax 单击 div 时在数据库中更新此状态，而无需刷新页面。

这是我的 PHP/HTML 代码：

 <?php if ($profile['online_status'] == "Online") { 

            $status = "Offline";

            }else{

            $status = "Online";

            } ?>

<div id="one"><li class="far fa-circle" onClick="UpdateRecord(<? echo $profile['online_status']; ?>);"/></li><? echo 'Show as ' .$status; ?></div>  

我的阿贾克斯：

<script type="text/javascript" src="/js/jquery.js"></script>

<script>

  function UpdateRecord(id)

  {

      jQuery.ajax({

       type: "POST",

       url: "update_status.php",

       data: 'id='+id,

       cache: false,

       success: function(response)

       {

         alert("Record successfully updated");

       }

     });

 }

</script>

更新状态.php

<?php

$var = @$_POST['id'] ;

$sql = "UPDATE users SET online_status = 'Offline' WHERE user_id = 1";

$result = mysqli_query($conn,$sql) or die(mysqli_error($conn));

//added for testing

echo 'var = '.$var;

?>

我目前没有收到任何警报，我的数据库中也没有任何更新。请有人可以帮助我改进/修复代码以使其正常工作吗？此外，如果有一种方法可以消除对 update_status.php 文件的需求并拥有 ajax 自我发布，那么这将是首选。

Answer 1

据我所知，没有弹出警报也没有更新任何内容的原因是onclick()您拥有的按钮。将参数周围的引号添加到更新函数。正如您所拥有的，javascript 将参数视为一个 javascript 变量，就像$profile['online_status'];一个字符串。如果您调试了代码，您应该会看到一条指向该行的onclick()错误改变这个onClick="UpdateRecord(<?&nbsp;echo&nbsp;$profile['online_status'];&nbsp;?>);"到onClick="UpdateRecord('<?&nbsp;echo&nbsp;$profile['online_status'];&nbsp;?>');"此外，您还在更新语句中对 where 子句进行硬编码。您应该$_POST['id']通过准备好的语句使用变量

Answer 2

将数据传递到 PHP 文件data: { id: id },将数据库连接添加到您的 PHP 文件<?php&nbsp;$var = $_POST['id'] ;&nbsp;$sql = "UPDATE users SET online_status = 'Offline' WHERE user_id = '$var'";&nbsp;$result = mysqli_query($conn,$sql) or die(mysqli_error($conn));?>如果您仍然看到任何错误，然后按F12并转到网络选项卡，然后单击该 div，网络选项卡将记录您的 ajax 文件返回，您可以通过选择您的 php 文件的响应来检查那里，希望它有帮助