Interrail Planner中模态框编辑旅行者信息的实现问题求助

一、原生模态框实现（推荐，无需iframe） #

1. 在pass.php中插入模态框HTML #

把原编辑页面的表单嵌入模态框，用PHP渲染当前旅行者的初始数据：

<!-- 编辑旅行者模态框 -->
<div id="editTravelerModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑旅行者信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="editTravelerForm" method="post">
          <input type="hidden" name="traveler_id" id="travelerId">
          <!-- 以下是示例字段，根据你的实际需求调整 -->
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input type="number" class="form-control" id="age" name="age" min="1" required>
          </div>
          <button type="submit" class="btn btn-primary">保存修改</button>
        </form>
      </div>
    </div>
  </div>
</div>

2. 改造编辑按钮的触发逻辑 #

给原编辑按钮添加数据属性，用来存储旅行者ID和当前信息：

<!-- 替换你的原编辑按钮 -->
<button class="btn btn-edit" 
        data-traveler-id="<?php echo $traveler['id']; ?>"
        data-traveler-name="<?php echo htmlspecialchars($traveler['name']); ?>"
        data-traveler-age="<?php echo $traveler['age']; ?>">
  编辑
</button>

3. 用JS处理模态框填充和表单提交 #

通过jQuery（或原生JS）实现点击填充数据、异步提交及页面更新：

$(document).ready(function() {
  // 点击编辑按钮，把旅行者数据填入模态框表单
  $('.btn-edit').click(function() {
    const travelerId = $(this).data('traveler-id');
    const travelerName = $(this).data('traveler-name');
    const travelerAge = $(this).data('traveler-age');

    $('#travelerId').val(travelerId);
    $('#name').val(travelerName);
    $('#age').val(travelerAge);

    $('#editTravelerModal').modal('show');
  });

  // 异步提交表单，避免页面跳转
  $('#editTravelerForm').submit(function(e) {
    e.preventDefault();
    const formData = $(this).serialize();

    $.ajax({
      url: 'update_traveler.php',
      type: 'POST',
      data: formData,
      success: function(response) {
        $('#editTravelerModal').modal('hide');
        // 提交成功后刷新页面，或者局部更新列表（优化体验）
        location.reload();
      },
      error: function() {
        alert('修改失败，请重试');
      }
    });
  });
});

4. 后端update_traveler.php逻辑复用 #

和原编辑页面的后端逻辑一致，仅需返回状态标识：

<?php
require 'config.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $travelerId = $_POST['traveler_id'];
  $name = $_POST['name'];
  $age = $_POST['age'];

  // 预处理SQL防止注入
  $stmt = $pdo->prepare("UPDATE travelers SET name = ?, age = ? WHERE id = ?");
  $stmt->execute([$name, $age, $travelerId]);

  echo 'success';
}
?>

二、iframe传参实现（备选方案） #

如果一定要用iframe，传递$traveler['id']只需通过GET参数即可：

1. 在pass.php中添加带iframe的模态框 #

<div id="editModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑旅行者信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <iframe id="editIframe" width="100%" height="400px" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

2. 编辑按钮触发时传递参数到iframe #

$('.btn-edit').click(function() {
  const travelerId = $(this).data('traveler-id');
  // 把ID作为GET参数传给iframe页面
  $('#editIframe').attr('src', `edit_traveler.php?id=${travelerId}`);
  $('#editModal').modal('show');
});

3. 在edit_traveler.php中接收并使用参数 #

<?php
require 'config.php';
$travelerId = $_GET['id'];
// 查询当前旅行者信息
$stmt = $pdo->prepare("SELECT * FROM travelers WHERE id = ?");
$stmt->execute([$travelerId]);
$traveler = $stmt->fetch();
?>

<!-- 原编辑表单 -->
<form method="post" action="update_traveler.php">
  <input type="hidden" name="traveler_id" value="<?php echo $traveler['id']; ?>">
  <!-- 其他表单字段 -->
  <button type="submit" class="btn btn-primary">保存</button>
</form>

<!-- 添加JS，提交成功后通知父页面刷新 -->
<script>
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  
  fetch('update_traveler.php', {
    method: 'POST',
    body: formData
  }).then(res => res.text())
    .then(data => {
      if (data === 'success') {
        // 关闭父页面的模态框并刷新
        window.parent.$('#editModal').modal('hide');
        window.parent.location.reload();
      }
    });
});
</script>

内容的提问来源于stack exchange，提问作者Rúben Rodrigues