页面刷新后状态仍为‘new’，tbl_apply的statusid未更新求助

多次尝试更新状态均失败，问题已持续两周以上。状态仅在页面表格中临时变更，刷新页面后恢复为new，数据库tbl_apply表的statusid字段也未同步更新。

相关代码 #

HTML/PHP 模态框代码

<span class="close">&times;</span>
<!-- Add your modal content here -->
<h3>Edit Status</h3>
<form id="editStatusForm" onsubmit="updateStatus(); return false;">
  <div class="form-group">
    <label for="newStatus">New Status:</label>
    <select id="newStatus" name="newStatus" class="form-control">
      <?php
      // Assuming you have a database connection established
      // Fetch the data from tbl_status table
      $status_query = "SELECT statuscat FROM tbl_status";
      $status_result = mysqli_query($con, $status_query);

      // Loop through the result and populate the dropdown options
      while ($row = mysqli_fetch_assoc($status_result)) {
          $status = $row['statuscat'];
          echo "<option value='$status'>$status</option>";
      }
      ?>

    <button type="submit" class="btn btn-primary">Update</button>

AJAX 请求代码

// Make an AJAX request to update the status in tbl_apply
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    // Update the status details in the box
    var statusBox = document.getElementById("statusDetails");
    statusBox.innerText = newStatus;

    // Close the modal
    var modal = document.getElementById("editStatusModal");
    modal.style.display = "none";
  }
};
xhttp.open("POST", "update_status.php", true); // Replace "update_status.php" with the actual PHP script to update the status in the database
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("newStatus=" + newStatus);

核心问题点 #

1. 缺少更新目标的记录ID：AJAX只传了状态值，没传要修改的申请ID，后端无法定位到tbl_apply里的具体行。
2. 状态值类型不匹配：下拉框传的是statuscat（状态名称），但数据库要更新的是statusid（数字ID），字段类型不匹配导致更新无效。
3. AJAX无错误处理：只处理了成功情况，请求失败或后端报错时无法感知，没法排查问题。
4. 变量未正确赋值：newStatus变量没明确获取下拉框选中值，可能传空值给后端。

修复步骤 #

1. 传递申请ID参数

• 在表单里加隐藏字段存储当前要更新的申请ID：

  <input type="hidden" id="applyId" name="applyId" value="[这里填当前申请的ID]">
  

• AJAX发送时带上ID：

  function updateStatus() {
    var newStatus = document.getElementById("newStatus").value;
    var applyId = document.getElementById("applyId").value;
    // ... 其他AJAX代码
    xhttp.send("newStatus=" + newStatus + "&applyId=" + applyId);
  }
  

2. 修改下拉框传递状态ID

• 调整PHP查询，同时获取statusid和statuscat：

  $status_query = "SELECT statusid, statuscat FROM tbl_status";
  while ($row = mysqli_fetch_assoc($status_result)) {
      echo "<option value='{$row['statusid']}'>{$row['statuscat']}</option>";
  }
  

3. 完善AJAX错误处理

• 增加失败回调，方便排查：

  xhttp.onerror = function() {
    alert("请求失败，请检查后端服务是否正常");
  };
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        // 原成功逻辑，同时显示状态名称而非ID
        var select = document.getElementById("newStatus");
        var statusText = select.options[select.selectedIndex].text;
        var statusBox = document.getElementById("statusDetails");
        statusBox.innerText = statusText;
        
        var modal = document.getElementById("editStatusModal");
        modal.style.display = "none";
      } else {
        alert("更新失败，后端返回错误：" + this.statusText);
      }
    }
  };
  

4. 修正后端update_status.php逻辑

• 确保正确接收参数并执行更新（用预处理语句防止SQL注入）：

  <?php
  $con = mysqli_connect("localhost", "用户名", "密码", "数据库名");
  if (!$con) die("数据库连接失败");
  
  $applyId = $_POST['applyId'] ?? '';
  $statusId = $_POST['newStatus'] ?? '';
  
  if ($applyId && $statusId) {
    $query = "UPDATE tbl_apply SET statusid = ? WHERE id = ?";
    $stmt = mysqli_prepare($con, $query);
    mysqli_stmt_bind_param($stmt, "ii", $statusId, $applyId);
    mysqli_stmt_execute($stmt);
    echo "更新成功";
  } else {
    echo "参数缺失：请检查申请ID和状态ID是否正确传递";
  }
  mysqli_close($con);
  ?>
  

内容的提问来源于stack exchange，提问作者Fatihah Shuhaimi