如何不使用表单POST将select选中的客户ID赋值给PHP变量

PHP是服务端执行语言，页面首次渲染完成时所有PHP代码已经执行完毕，用户在前端浏览器操作下拉框选中客户的行为发生在本地，无法直接将JS获取到的客户ID赋值给页面初始加载阶段的PHP变量。由于现有表单需要提交到其他页面，无法通过同步提交传值，最合理的方案是通过AJAX异步请求，在选中客户时动态拉取对应专属商品，无刷新更新商品下拉框选项，同时不影响原有表单的提交逻辑。

• 修正原有代码的语法问题和不规范命名，避免运行冲突
• 新增独立的商品查询接口，接收客户ID参数返回对应商品选项
• 修改前端JS逻辑，选中客户时异步请求接口，将返回的商品选项填充到商品下拉框
• 保留原有表单提交逻辑，选中的客户ID会存入隐藏输入框随表单提交

1. 修正基础表单代码 #

闭合原有表单的缺失标签，修改容易引发冲突的id命名，商品下拉框初始仅保留提示项，无需提前查询全量商品：

<form action="../Database/insert_quote.php" method="post"> 
    <!-- 存客户ID的隐藏域，修改id避免和原生属性冲突 -->
    <input type="hidden" name="c_id" id="c_id" />                               
    <div class="cardIn">
        <label>Customer</label>
        <div class="select margin-top" style="width: 450px;">
            <select name="customer" id="customer_email" >
                <option value="" disabled selected>Click to See Customers</option>
                <?php
                $records = mysqli_query($conn, "SELECT * FROM addclient");
                while($data = mysqli_fetch_array($records)){
                    echo '<option 
                        value="'.$data['company'].'"
                        data-email="'. $data['email'].'" 
                        data-id="'. $data['id'].'" 
                        data-percent_discount="'. $data['percent_discount'].'" 
                        data-value_discount="'. $data['value_discount'].'" 
                    >'. $data['company'] . '</option>';
                }
                ?>
            </select>
        </div>
    </div>

    <!-- 原有邮箱、折扣等输入框保留在对应位置即可 -->

    <div>
        <label>Product</label>
        <select name="item" id="item">
            <option value="" disabled selected>请先选择客户查看对应商品</option>
        </select>
    </div>
    <!-- 原有表单其他字段、提交按钮保留即可 -->
</form>

2. 新增商品查询接口 #

新建get_customer_products.php文件，专门处理AJAX请求，接收客户ID后返回拼接好的商品选项HTML：

<?php
// 引入你自己的数据库连接文件，路径按实际目录调整
include '../Database/db_connect.php';

// 接收并校验客户ID参数，拦截非法输入
$customerId = isset($_GET['cid']) ? intval($_GET['cid']) : 0;
$optionsHtml = '<option value="" disabled selected>Click to See Products</option>';

if($customerId > 0){
    // 用预处理语句查询，避免SQL注入风险
    $stmt = mysqli_prepare($conn, "SELECT product, new_price_rate, description FROM customer_product WHERE customer = ?");
    // 如果你的customer字段存的是字符串类型的公司名，把下面的i改成s即可
    mysqli_stmt_bind_param($stmt, "i", $customerId);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    
    while($data = mysqli_fetch_array($result)){
        // 输出到HTML的内容做转义，避免XSS风险
        $optionsHtml .= '<option 
            value="'.htmlspecialchars($data['product']).'"  
            data-new_price_rate="'.htmlspecialchars($data['new_price_rate']).'" 
            data-description="'.htmlspecialchars($data['description']).'"
        >'.htmlspecialchars($data['product']).'</option>';
    }
}

// 直接返回拼接好的选项字符串
echo $optionsHtml;
?>

3. 修改前端JS逻辑 #

在原有客户选择的change事件中，新增AJAX请求逻辑，选中客户后拉取对应商品填充下拉框：

<script>
var customerSelect = document.getElementById("customer_email");
var productSelect = document.getElementById("item");

customerSelect.addEventListener("change", function() {
    var selectedOption = customerSelect.options[customerSelect.selectedIndex];
    // 填充原有邮箱、折扣、客户ID等关联字段
    document.getElementById('email').value = selectedOption.getAttribute("data-email");
    document.getElementById('c_id').value = selectedOption.getAttribute("data-id");
    document.getElementById('percent_discount').value = selectedOption.getAttribute("data-percent_discount");
    document.getElementById('value_discount').value = selectedOption.getAttribute("data-value_discount");

    // 拿到选中的客户ID，发请求拉取对应商品
    var selectedCid = selectedOption.getAttribute("data-id");
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './get_customer_products.php?cid=' + selectedCid, true);
    xhr.onload = function(){
        if(xhr.status === 200){
            // 将返回的商品选项直接替换到下拉框中
            productSelect.innerHTML = xhr.responseText;
        }
    }
    xhr.send();
});
</script>

• 原有表单提交到insert_quote.php时，隐藏域c_id已经被JS填充为选中的客户ID，直接通过$_POST['c_id']即可获取，不影响原有提交流程
• 不要直接把前端传入的参数拼接进SQL语句，必须使用预处理语句避免SQL注入
• 所有输出到前端HTML的动态内容，都要用htmlspecialchars()做转义，避免XSS攻击

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