如何将PHP变量delivery_id传入模态框并用于MySQL查询

你遇到的问题很典型：模态框是页面加载时就由服务器渲染完成的，里面的PHP代码只会执行一次，所以直接用$delivery_id只会拿到页面渲染时的那个值（通常是最后一行的id），而不是你点击的那个按钮对应的id。下面是最佳的解决思路和具体实现：

核心思路 #

我们需要用JavaScript捕获点击事件，获取当前按钮的delivery_id，然后通过AJAX请求服务器获取对应的数据，再动态填充到模态框中。这样既保证了数据的正确性，也避免了重复渲染多个模态框的冗余。

步骤1：修改模态框结构，添加隐藏字段并预留表单填充位置 #

首先调整你的模态框HTML，去掉里面的PHP查询代码（因为这些代码无法动态更新），添加一个隐藏输入框来存储当前的delivery_id，并把表单字段留空或设置默认值：

<div id="editModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Purchase</h4>
      </div>
      <div class="modal-body">
        <!-- 隐藏字段存储当前选中的delivery_id -->
        <input type="hidden" id="delivery_id_hidden" name="delivery_id">
        
        <div class="container-fluid" id="div_user_master" class="ae_form">
          <form id="myForm" action="/platformDev/create_subscription.php" method="POST">
            Supplier Name: 
            <td class='text-right' id='department_id' style='width:20%;'>
              <!-- 供应商下拉框，后续动态填充 -->
              <select id="supplier_select" name="supplier_name" class="form-control"></select>
            </td>
            <input id='purch_id' name='purch_id' class='form-control purch_id' type='hidden'/>
            
            Delivery Date: 
            <span class='required_field'><i class='fa fa-star fa-sm'></i></span>
            <input class='form-control' tabindex='3' id='date' name='date' type='text'/> <br/>
            
            Delivery Number: 
            <input type='text' id='delivery_number' name='delivery_number' class='form-control' style='width:80%;' />
            
            Invoice Cost: 
            <input type='text' id='unit_cost' name='unit_cost' class='form-control' style='width:80%;' />
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn form-btns btn-primary" style="float: left;" data-dismiss="modal" id="customButton">Save Changes</button>
        <button type="button" class="btn dt_buttons close_this ajax_forms" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

步骤2：添加JavaScript监听模态框显示事件，获取delivery_id并请求数据 #

使用Bootstrap模态框的show.bs.modal事件，这个事件会在模态框显示前触发，我们可以在这里获取触发按钮的data-id，并发送AJAX请求获取对应的数据：

// 监听模态框即将显示的事件
$('#editModal').on('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerButton = $(event.relatedTarget);
  // 从按钮的data-id属性中拿到delivery_id
  const deliveryId = triggerButton.data('id');
  const modal = $(this);

  // 将delivery_id存入隐藏字段
  modal.find('#delivery_id_hidden').val(deliveryId);

  // 发送AJAX请求到服务器，获取该delivery_id对应的采购详情
  $.ajax({
    url: 'get_purchase_details.php', // 这个PHP文件用来处理查询
    type: 'GET',
    data: { delivery_id: deliveryId },
    dataType: 'json',
    success: function (purchaseData) {
      // 填充表单字段
      modal.find('#purch_id').val(purchaseData.id);
      modal.find('#date').val(purchaseData.del_date);
      modal.find('#delivery_number').val(purchaseData.delivery_number);
      modal.find('#unit_cost').val(purchaseData.formatted_cost);

      // 填充供应商下拉框（假设后端返回了所有可选供应商）
      const supplierSelect = modal.find('#supplier_select');
      supplierSelect.empty(); // 清空原有选项

      // 循环添加供应商选项，并设置选中当前供应商
      purchaseData.suppliers.forEach(supplier => {
        const option = $('<option>')
          .val(supplier.id)
          .text(supplier.supplier_name);
        
        if (supplier.id === purchaseData.supplier_id) {
          option.prop('selected', true);
        }
        
        supplierSelect.append(option);
      });
    },
    error: function () {
      alert('加载采购详情失败，请稍后重试！');
    }
  });
});

步骤3：创建服务器端脚本get_purchase_details.php，处理查询并返回JSON #

这个脚本负责接收AJAX传递的delivery_id，查询数据库并返回格式化后的JSON数据，同时要注意防止SQL注入（一定要用预处理语句，不要直接拼接SQL！）：

<?php
// 这里需要引入你的数据库连接文件和会话处理
session_start();
include('your_db_connection.php');

// 获取AJAX传递的delivery_id
$delivery_id = $_GET['delivery_id'];
$store_id = $_SESSION['store_id']; // 假设你的store_id存在会话中

// 1. 查询采购详情（使用预处理语句防止SQL注入）
$purchase_query = "SELECT id, supplier_id, date as del_date, delivery_number, cost_value 
                   FROM store_purchases 
                   WHERE id = ?";
$stmt = $conn->prepare($purchase_query);
$stmt->bind_param("i", $delivery_id); // 绑定整数类型参数
$stmt->execute();
$result = $stmt->get_result();
$purchase = $result->fetch_object();

// 格式化成本值为两位小数
$formatted_cost = number_format(floatval($purchase->cost_value), 2);

// 2. 查询所有可选供应商（用于填充下拉框）
$suppliers_query = "SELECT id, supplier_name 
                    FROM supplier_master 
                    WHERE store_id = ?";
$suppliers_stmt = $conn->prepare($suppliers_query);
$suppliers_stmt->bind_param("i", $store_id);
$suppliers_stmt->execute();
$suppliers_result = $suppliers_stmt->get_result();
$suppliers = [];
while ($supplier = $suppliers_result->fetch_object()) {
  $suppliers[] = $supplier;
}

// 返回JSON格式的数据
echo json_encode([
  'id' => $purchase->id,
  'supplier_id' => $purchase->supplier_id,
  'del_date' => $purchase->del_date,
  'delivery_number' => $purchase->delivery_number,
  'formatted_cost' => $formatted_cost,
  'suppliers' => $suppliers
]);

// 关闭数据库连接和语句
$stmt->close();
$suppliers_stmt->close();
$conn->close();
?>

为什么这个方法更好？ #

1. 动态性：每次打开模态框都会获取当前点击行的delivery_id，确保数据正确对应
2. 安全性：使用预处理语句防止SQL注入，避免了直接拼接SQL的风险
3. 性能：只渲染一个模态框，避免了页面加载时生成多个重复模态框的冗余

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