PHP联动下拉框问题：实现无刷新加载关联门店数据

要实现不刷新页面、保留表单已填内容的前提下，根据选中公司动态加载对应门店，AJAX异步请求是最适合的方案，具体步骤如下：

1. 重构前端代码 #

替换原来的check()函数，改成监听下拉框变化并发送AJAX请求的逻辑，同时优化HTML结构的安全性：

<label class="form-control-label" for="input-last-name">Company</label>
<select type="text" id="company" name="company" class="form-control form-control-alternative">
    <option></option>
    <?php
    $sql = "SELECT * FROM companies WHERE CompanyID != '4'";
    $result = $con->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            // 转义内容防止XSS攻击
            $companyId = htmlspecialchars($row['CompanyID'], ENT_QUOTES);
            $companyName = htmlspecialchars($row['CompanyName'], ENT_QUOTES);
            echo "<option value='{$companyId}'>{$companyName}</option>";
        }
    }
    ?>
</select>

<label class="form-control-label" for="input-last-name">Store </label>
<select id="stores" name="stores" class="form-control form-control-alternative" disabled>
    <option></option>
</select>

<script>
// 获取DOM元素
const companySelect = document.getElementById('company');
const storeSelect = document.getElementById('stores');

// 监听公司下拉框的选择变化
companySelect.addEventListener('change', function() {
    const selectedCompanyId = this.value;
    
    // 重置门店下拉框状态
    storeSelect.innerHTML = '<option></option>';
    storeSelect.disabled = true;

    if (selectedCompanyId) {
        // 发送AJAX请求获取对应门店数据
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `get_stores.php?company_id=${encodeURIComponent(selectedCompanyId)}`, true);
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    const stores = JSON.parse(xhr.responseText);
                    // 动态生成门店选项
                    stores.forEach(store => {
                        const option = document.createElement('option');
                        option.value = htmlspecialchars(store.storeid);
                        option.textContent = htmlspecialchars(store.storename);
                        storeSelect.appendChild(option);
                    });
                    storeSelect.disabled = false;
                } catch (e) {
                    console.error('解析门店数据失败:', e);
                }
            } else {
                console.error('请求门店数据失败，状态码:', xhr.status);
            }
        };
        
        xhr.onerror = function() {
            console.error('网络请求出错，请检查连接');
        };
        
        xhr.send();
    }
});

// 工具函数：转义HTML字符，避免XSS风险
function htmlspecialchars(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 可选：如果页面加载时公司下拉框有默认选中值，自动触发一次加载
// companySelect.dispatchEvent(new Event('change'));
</script>

2. 创建后端接口文件 get_stores.php #

这个文件负责接收前端传来的公司ID，查询对应门店并返回JSON格式数据：

<?php
// 引入你的数据库连接文件，确保$con是有效的数据库连接
include 'your_db_connection.php'; // 替换成你的数据库连接文件路径

$companyId = isset($_GET['company_id']) ? $_GET['company_id'] : '';
$response = [];

if (!empty($companyId)) {
    // 使用预处理语句防止SQL注入，这一步非常重要！
    $sql = "SELECT * FROM stores WHERE CompanyID = ?"; // 注意：确认stores表中关联公司的字段名是CompanyID，若不是请修改
    $stmt = $con->prepare($sql);
    $stmt->bind_param("s", $companyId); // 根据你的CompanyID类型调整参数，s=字符串，i=整数
    $stmt->execute();
    $result = $stmt->get_result();
    
    while ($row = $result->fetch_assoc()) {
        $response[] = [
            'storeid' => $row['storeid'],
            'storename' => $row['storename']
        ];
    }
    
    $stmt->close();
}

$con->close();

// 返回JSON格式的响应
header('Content-Type: application/json');
echo json_encode($response);
?>

关键注意事项 #

• SQL注入防护：必须使用预处理语句（prepare/bind_param），绝对不能直接把用户输入拼接到SQL语句中，避免被恶意攻击。
• XSS防护：所有输出到HTML的内容都要通过htmlspecialchars转义，防止恶意脚本注入页面。
• 字段匹配：确认stores表中关联公司的字段名是CompanyID（和companies表的主键对应），如果字段名不同请修改SQL中的字段。
• 初始状态处理：如果页面加载时公司下拉框有默认选中项，可以取消前端脚本最后一行的注释，自动触发一次加载。
• 表单数据保留：因为是异步请求，页面不会刷新，表单中已填写的其他内容会自动保留，无需额外处理。

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