使用Checkbox配合AJAX无刷新更新数据库status字段的实现问题

现有代码核心问题 #

• 前端取值逻辑错误：固定读取Checkbox的value属性（写死为1），无法区分勾选/取消状态，导致无论是否勾选，传给后端的参数永远为1，数据库status字段永远更新为1
• jQuery重复引入：同时引入CDN版和本地jQuery文件，易引发冲突，若本地文件不存在还会导致JS代码无法执行
• 后端无结果校验：无论SQL执行成功或失败，都固定返回success，前端无法识别实际更新结果
• 存在SQL注入风险：直接拼接SQL语句，未做参数过滤与预处理，存在数据库被攻击的隐患

修正后的代码 #

index.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 仅保留一个有效jQuery引入即可，这里用官方CDN避免本地文件缺失问题 -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <input type="checkbox" name="action1" id="action1" title="Action 1" />
  <script type="text/javascript">
    $("#action1").change(function () {
      // 读取当前勾选状态，勾选传1，未勾选传0
      var isChecked = $(this).is(':checked') ? 1 : 0;
      $.ajax({
        type: "POST",
        url: "update.php",
        async: true,
        data: {
          action1: isChecked
        },
        success: function (msg) {
          if (msg.trim() === 'success') {
            alert('更新成功');
          } else {
            alert('更新失败，错误信息：' + msg);
          }
        },
        error: function () {
          alert('请求发送失败，请检查update.php路径是否正确');
        }
      });
    });
  </script>
</body>
</html>

update.php #

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "api";

// 创建连接
$conn = new mysqli($servername, $username, $password, $database);

// 检查连接
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 校验参数是否存在
if (!isset($_POST['action1'])) {
  die('参数缺失');
}

$status = intval($_POST['action1']);
$id = 1; // 可根据实际需求调整要更新的id

// 使用预处理语句避免SQL注入
$stmt = $conn->prepare("UPDATE `toggle` SET status = ? WHERE id = ?");
$stmt->bind_param("ii", $status, $id);

if ($stmt->execute()) {
  echo "success";
} else {
  echo "SQL执行失败: " . $stmt->error;
}

$stmt->close();
$conn->close();
?>

验证步骤 #

• 勾选/取消Checkbox，观察是否弹出对应提示
• 打开浏览器开发者工具（F12）的「网络」标签，可查看AJAX请求的参数、返回结果，排查异常
• 操作后刷新数据库toggle表，确认status字段与勾选状态一致

内容的提问来源于stack exchange，提问作者KnowledgeMan Element