使用JavaScript批量提交学生成绩失败：仅保存单条数据求助

问题背景 #

我正在开发一个学生成绩录入页面，通过JavaScript实现自动保存/更新输入值，但目前只能保存列表中单个学生的成绩；不使用JavaScript时，fetch.php中的循环可以批量保存所有学生成绩，现在需要修改脚本实现批量提交保存所有学生成绩。

原代码问题分析 #

1. JavaScript端：使用了重复的ID（post_title/post_desc/post_id），导致只能获取第一个匹配元素的值，无法批量收集所有学生数据。
2. HTML端：循环生成的元素重复使用ID，违反HTML规范，且存在拼写错误（type="hiden"应为type="hidden"）。
3. PHP端：变量定义顺序错误（$st在count($st)之后才赋值），SQL语句存在语法错误，且未做防SQL注入处理。

修正后的代码实现 #

1. JavaScript（批量收集并提交数据）

function autosave() {
  const students = [];
  // 遍历每一行学生数据
  $("tr").each(function() {
    const $row = $(this);
    const title = $row.find(".post_title").val().trim();
    const desc = $row.find(".post_desc").val().trim();
    const id = $row.find(".post_id").val().trim();
    
    // 仅收集有输入内容的学生数据（可根据需求调整）
    if (title || desc) {
      students.push({
        send_title: title,
        send_desc: desc,
        send_id: id
      });
    }
  });

  if (students.length) {
    $.ajax({
      url: "fetch.php",
      method: "POST",
      data: { students },
      dataType: "text",
      success: () => {
        $("#autosave").text("所有数据已保存");
        setTimeout(() => $("#autosave").text(""), 5000);
      },
      error: () => {
        $("#autosave").text("数据保存失败");
        setTimeout(() => $("#autosave").text(""), 5000);
      }
    });
  }
}

// 设定自动保存定时器，避免嵌套定时器问题
setInterval(autosave, 10000);

2. HTML/PHP页面（替换重复ID为类名）

<?php $results = mysqli_query($conn,"SELECT * FROM student LIMIT 5");
    while($rows = mysqli_fetch_array($results)) { ?>
<tr>
  <td><?php echo $rows['fname'].' '.$rows['lname']?></td>
  <td><input type="text" class="form-control post_title" name="post_title[]"></td>
  <td><input type="text" class="form-control post_desc" name="post_desc[]"></td>
  <input type="hidden" class="form-control post_id" value="<?php echo $rows['idnumber'] ?>" name="post_id[]">
</tr>
<?php } ?>

<div id="autosave"></div>

3. fetch.php（批量处理+防SQL注入）

if(isset($_POST['students']) && is_array($_POST['students'])){
  foreach($_POST['students'] as $student){
    // 转义数据防止SQL注入
    $idnumber = mysqli_real_escape_string($conn, $student['send_id']);
    $post_title = mysqli_real_escape_string($conn, $student['send_title']);
    $post_desc = mysqli_real_escape_string($conn, $student['send_desc']);

    // 查询是否存在该学生的成绩记录
    $checkQuery = "SELECT id FROM tbl_data WHERE idnumber = '$idnumber'";
    $checkResult = mysqli_query($conn, $checkQuery);
    
    if(mysqli_num_rows($checkResult) === 0){
      // 无记录则插入
      $sql = "INSERT INTO tbl_data (post_title, post_desc, idnumber) VALUES ('$post_title', '$post_desc', '$idnumber')";
    } else {
      // 有记录则更新
      $sql = "UPDATE tbl_data SET post_title = '$post_title', post_desc = '$post_desc' WHERE idnumber = '$idnumber'";
    }
    mysqli_query($conn, $sql);
  }
  echo "success";
}

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