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

【问题标题】：Update MYSQL Table On Div Click using Ajax - No Page Refresh?使用 Ajax 在 Div 单击时更新 MYSQL 表 - 没有页面刷新？
【发布时间】：2020-05-23 11:07:10
【问题描述】：

我有一个名为 users 的 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>

update_status.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 自我发布，那么这将是首选。

提前谢谢你。

【问题讨论】：

您的浏览器控制台是否显示任何错误？而且您没有发送任何id 其status ？

标签： javascript php jquery mysql ajax

【解决方案1】：

据我所知，没有弹出警报或没有任何更新的原因是您拥有的onclick() on 按钮。在更新函数的参数周围添加引号。正如你所拥有的，javascript 将参数视为 javascript 变量，因为 $profile['online_status']; 是一个字符串。

如果您已调试过代码，您应该会看到指向 onclick() 行的错误

改变这个

onClick="UpdateRecord(<? echo $profile['online_status']; ?>);"

到

onClick="UpdateRecord('<? echo $profile['online_status']; ?>');"

您还在更新语句中对 where 子句进行硬编码。您应该通过准备好的语句使用$_POST['id'] 变量

【讨论】：

很抱歉这确实有效。我忘记在我的头文件中引用 google js 脚本。

【解决方案2】：

将数据传递给 PHP 文件

data: { id: id },

为您的 PHP 文件添加数据库连接

<?php
 $var = $_POST['id'] ;
 $sql = "UPDATE users SET online_status = 'Offline' WHERE user_id = '$var'";
 $result = mysqli_query($conn,$sql) or die(mysqli_error($conn));
?>

如果您仍然看到任何错误，请按F12 并转到网络选项卡，然后单击该 div，网络选项卡将记录您的 ajax 文件返回，您可以通过选择您的 php 文件的响应来检查那里，希望对您有所帮助

【讨论】：