PHP模态框编辑表格数据问题：仅能调用ID=1且需刷新页面

我来帮你搞定这两个头疼的问题——既能编辑表格里的任意数据，又不用刷新页面就能看到更新效果：

一、解决「只能编辑ID=1数据」的问题 #

你的核心问题是硬编码了固定ID=1，而且模态框的表单数据是页面加载时就固定死的，没法根据点击的条目动态切换。我们需要让每个编辑按钮传递对应条目的ID，然后动态加载该ID的数据到模态框：

1. 修改表格的编辑按钮 #

给每个表格行的编辑按钮加上data-id属性，用来传递当前条目的ID：

<!-- 假设你的表格是循环输出的，示例如下 -->
<?php
$booksQuery = $mysqli->query("select * from bookrecords");
while($book = $booksQuery->fetch_assoc()){
?>
<tr data-id="<?php echo $book['ID']; ?>">
  <td><?php echo $book['ID']; ?></td>
  <td><?php echo $book['BookName']; ?></td>
  <td><?php echo $book['ISBN']; ?></td>
  <td><?php echo $book['Publisher']; ?></td>
  <td><?php echo $book['Author']; ?></td>
  <td>
    <button class="btn btn-primary btn-edit" 
            data-id="<?php echo $book['ID']; ?>" 
            data-toggle="modal" 
            data-target="#editModal">
      编辑
    </button>
  </td>
</tr>
<?php } ?>

2. 用AJAX动态加载对应ID的数据到模态框 #

添加一段JavaScript代码，监听编辑按钮的点击事件，通过AJAX请求获取对应ID的书籍数据，再填充到模态框的表单里：

$(document).ready(function(){
  // 监听编辑按钮点击
  $('.btn-edit').click(function(){
    var bookId = $(this).data('id');
    // 发送AJAX请求拿数据
    $.ajax({
      url: 'get_book_detail.php', // 新建一个处理数据请求的PHP文件
      type: 'POST',
      data: {id: bookId},
      dataType: 'json',
      success: function(data){
        // 把数据填充到表单对应字段
        $('#id').val(data.ID);
        $('#nm').val(data.BookName);
        $('#is').val(data.ISBN);
        $('#pb').val(data.Publisher);
        $('#au').val(data.Author);
      }
    });
  });
});

3. 创建get_book_detail.php处理数据请求 #

这个文件专门负责根据传入的ID返回对应书籍的JSON数据：

<?php
$mysqli = new mysqli('127.0.0.1','root','','books');
if(isset($_POST['id'])){
  $id = $_POST['id'];
  // 重点：用预处理语句防SQL注入！
  $stmt = $mysqli->prepare("select * from bookrecords where ID=?");
  $stmt->bind_param("i", $id);
  $stmt->execute();
  $result = $stmt->get_result();
  $row = $result->fetch_assoc();
  echo json_encode($row);
}
?>

二、解决「更新后必须刷新网页」的问题 #

我们改用AJAX提交表单，成功后直接更新表格对应行的数据，不用整页刷新：

1. 给表单加ID，阻止默认提交行为 #

给模态框里的表单加上ID，方便我们用JS监听提交事件：

<form id="editBookForm">
  <!-- 你的原有表单内容不变 -->
</form>

2. 添加表单提交的AJAX逻辑 #

$(document).ready(function(){
  // 监听表单提交
  $('#editBookForm').submit(function(e){
    e.preventDefault(); // 阻止默认的表单提交刷新行为
    var formData = $(this).serialize(); // 序列化表单里的所有数据

    $.ajax({
      url: 'update_book.php', // 把原来的更新逻辑移到这个文件里
      type: 'POST',
      data: formData,
      success: function(response){
        // 关闭模态框
        $('#editModal').modal('hide');
        // 显示成功提示（可以复用你原来的alert组件）
        $('.alert-success').show().delay(3000).fadeOut();
        
        // 直接更新表格对应行的数据
        var bookId = $('#id').val();
        var targetRow = $('tr[data-id="'+bookId+'"]');
        targetRow.find('td:eq(1)').text($('#nm').val()); // 更新书名列
        targetRow.find('td:eq(2)').text($('#is').val()); // 更新ISBN列
        targetRow.find('td:eq(3)').text($('#pb').val()); // 更新出版社列
        targetRow.find('td:eq(4)').text($('#au').val()); // 更新作者列
      },
      error: function(){
        $('.alert-failed').show().delay(3000).fadeOut();
      }
    });
  });
});

3. 把原更新逻辑移到update_book.php #

<?php
$mysqli = new mysqli('127.0.0.1','root','','books');
if(isset($_POST['update'])){
  $id = $_POST['id'];
  $nm = $_POST['nm'];
  $is = $_POST['is'];
  $pb = $_POST['pb'];
  $au = $_POST['au'];
  
  // 同样用预处理语句防SQL注入！
  $stmt = $mysqli->prepare("UPDATE bookrecords set BookName=?, ISBN=?, Publisher=?, Author=? where ID=?");
  $stmt->bind_param("ssssi", $nm, $is, $pb, $au, $id);
  $result = $stmt->execute();
  
  echo $result ? 'success' : 'error';
}
?>

关键提醒：防SQL注入 #

你的原代码直接把用户输入拼到SQL语句里，存在严重的安全风险！一定要用预处理语句（就像上面代码里的prepare和bind_param）来避免SQL注入攻击。

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