从数据库获取下拉选项列表的技术咨询（附PHP及HTML代码）

首先，你的PHP代码存在几个关键问题，会导致前端无法正确解析数据，我先帮你修正，再补充前端的实现步骤，最后列出常见问题排查点。

一、修正PHP控制器代码 #

你的原代码在循环中每次覆盖$data对象，还多次输出JSON，这会产生无效的JSON格式。下面是修正后的代码：

<?php
require_once 'connexion.php';

// 强制设置响应为JSON格式，避免解析混乱
header('Content-Type: application/json; charset=utf-8');

// 只查询需要的字段，提升查询效率
$sql = "SELECT id, libelle FROM Motif";
$stmt = sqlsrv_query($conn, $sql);

if ($stmt === false) {
    // 返回JSON格式的错误信息，方便前端处理
    echo json_encode(['error' => print_r(sqlsrv_errors(), true)]);
    exit;
}

$options = [];
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
    // 将每一行数据添加到数组中，而不是覆盖
    $options[] = [
        "id" => $row['id'],
        "libelle" => utf8_encode($row['libelle'])
    ];
}

// 输出完整的JSON数组
echo json_encode($options);

// 释放数据库资源，养成良好习惯
sqlsrv_free_stmt($stmt);
sqlsrv_close($conn);
exit;
?>

二、完成HTML和前端JavaScript代码 #

假设你的HTML里有一个select元素，先补全它：

<select id="motifDropdown">
    <option value="">请选择事由...</option>
</select>

接下来用原生JavaScript请求PHP接口并填充选项（如果用jQuery的话我也会给你版本）：

原生JS版本 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const dropdown = document.getElementById('motifDropdown');
    
    fetch('你的PHP文件名.php') // 替换成你实际的PHP文件路径
        .then(res => {
            if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
            return res.json();
        })
        .then(data => {
            if (data.error) {
                console.error('数据库错误:', data.error);
                alert('加载选项失败，请稍后重试');
                return;
            }
            // 遍历数据，逐个添加选项
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.libelle;
                dropdown.appendChild(option);
            });
        })
        .catch(err => {
            console.error('加载失败:', err);
            alert('加载选项失败，请检查网络或服务器状态');
        });
});

jQuery版本（如果你项目里用了jQuery） #

$(document).ready(function() {
    $.ajax({
        url: '你的PHP文件名.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            if (data.error) {
                console.error('数据库错误:', data.error);
                alert('加载选项失败，请稍后重试');
                return;
            }
            // 遍历数据填充选项
            $.each(data, function(i, item) {
                $('#motifDropdown').append(`<option value="${item.id}">${item.libelle}</option>`);
            });
        },
        error: function(xhr, status, err) {
            console.error('请求失败:', err);
            alert('加载选项失败，请检查网络或服务器状态');
        }
    });
});

三、常见问题排查 #

1. 数据库连接失败：检查connexion.php里的SQL Server连接参数（服务器地址、用户名、密码、数据库名）是否正确，可在PHP开头添加错误调试代码：error_reporting(E_ALL); ini_set('display_errors', 1);
2. 字符编码乱码：如果libelle显示乱码，确认数据库表的字符集是否和PHP输出的UTF-8一致，若数据库已是UTF-8，可去掉utf8_encode()函数
3. SQL语法错误：确认Motif表名、id/libelle字段名拼写正确，可在数据库客户端直接执行SQL语句测试
4. 跨域问题：如果前端页面和PHP接口不在同一域名/端口，需在PHP开头添加跨域头：

   header("Access-Control-Allow-Origin: 你的前端域名"); // 生产环境不要用*
   header("Access-Control-Allow-Methods: GET");
   

5. 无效JSON输出：打开浏览器开发者工具的Network面板，查看PHP接口的响应内容，确认是合法的JSON数组，没有多余的HTML或错误信息

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