如何通过AJAX在HTML的select元素中填充数据库查询列表（无需转PHP）

1. 编写后端数据接口（get_objetos.php） #

这个文件作为独立接口，仅负责查询数据库并返回JSON格式的列表数据，不输出任何HTML内容：

<?php
include 'conexion.php';

// 执行数据库查询，只获取需要的字段（codigo和detalle）
$query = mysqli_query($est, "SELECT codigo, detalle FROM objeto_gasto ORDER BY codigo");

// 将查询结果转为关联数组
$objetos = [];
while ($datos_obj = mysqli_fetch_assoc($query)) {
    $objetos[] = $datos_obj;
}

// 设置响应头为JSON格式，确保编码正确
header('Content-Type: application/json; charset=utf-8');

// 输出JSON数据
echo json_encode($objetos);

// 关闭数据库连接（若conexion.php未自动处理）
mysqli_close($est);
?>

2. 编写静态HTML页面（index.html） #

纯HTML文件，通过AJAX异步请求后端接口，获取数据后动态生成下拉选项：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>lista objetos</title>
</head>
<body>
    <div>
        <select name="objetos" id="objetosSelect"></select>
    </div>

    <script>
        // 获取页面中的select元素
        const selectElement = document.getElementById('objetosSelect');

        // 原生XMLHttpRequest实现AJAX请求（适合理解底层逻辑）
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'get_objetos.php', true);

        xhr.onload = function() {
            if (this.status === 200) {
                // 解析后端返回的JSON数据
                const objetos = JSON.parse(this.responseText);
                
                // 遍历数据，创建并插入option元素
                objetos.forEach(objeto => {
                    const option = document.createElement('option');
                    option.value = objeto.codigo;
                    option.textContent = objeto.detalle;
                    selectElement.appendChild(option);
                });
            } else {
                // 请求失败时添加提示选项
                const errorOption = document.createElement('option');
                errorOption.textContent = '加载失败，请重试';
                selectElement.appendChild(errorOption);
            }
        };

        // 发送请求
        xhr.send();

        // 可选：更简洁的现代Fetch API实现
        /*
        fetch('get_objetos.php')
            .then(response => {
                if (!response.ok) throw new Error('请求异常');
                return response.json();
            })
            .then(objetos => {
                objetos.forEach(objeto => {
                    const option = document.createElement('option');
                    option.value = objeto.codigo;
                    option.textContent = objeto.detalle;
                    selectElement.appendChild(option);
                });
            })
            .catch(() => {
                const errorOption = document.createElement('option');
                errorOption.textContent = '加载失败，请重试';
                selectElement.appendChild(errorOption);
            });
        */
    </script>
</body>
</html>

核心要点 #

• 前后端职责分离：后端专注数据输出，前端负责页面渲染，符合现代开发思路
• AJAX异步请求：无需刷新页面即可加载数据，提升用户体验
• 两种实现方式：XMLHttpRequest适合理解AJAX底层原理，Fetch API是浏览器推荐的现代写法
• 跨域注意：确保两个文件在同一域名/端口下（本地开发环境默认满足）

内容的提问来源于stack exchange，提问作者Emiliano De Gracia