html下拉框获取数据库数据

数据库准备

首先需要有一个存储数据的数据库表,例如创建一个名为categories的表，包含id和name字段。

示例SQL脚本：

CREATE TABLE categories (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);
INSERT INTO categories (name) VALUES ('电子产品'), ('服装'), ('食品');

后端接口开发（PHP示例）

通过PHP从数据库中查询数据并以JSON格式返回。

get_categories.php：

<?php
header('Content-Type: application/json');
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->query("SELECT  FROM categories");
    $categories = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($categories);
} catch(PDOException $e) {
    echo json_encode(['error' => $e->getMessage()]);
}
?>

前端HTML与JavaScript实现

使用AJAX请求后端接口并将数据填充到<select>

HTML结构：

<select id="category-select" style="width:200px;">
    <option value="">请选择分类</option>
</select>

JavaScript代码（使用jQuery）：

$(document).ready(function(){
    $.ajax({
        url: 'get_categories.php',
        method: 'GET',
        dataType: 'json',
        success: function(data){
            var select = $('#category-select');
            if(data.error){
                alert('数据加载失败: ' + data.error);
            }else{
                $.each(data, function(i, item){
                    select.append('<option value="'+item.id+'">'+item.name+'</option>');
                });
            }
        },
        error: function(xhr){
            alert('网络错误: ' + xhr.statusText);
        }
    });
});

完整工作流程

1. 页面加载时,JavaScript发起AJAX请求到get_categories.php
2. 后端PHP连接数据库,查询categories表所有数据
3. 将查询结果转换为JSON格式返回给前端
4. JavaScript动态生成<option>元素并插入到<select>标签中

常见问题与解答

问题1：出现"No 'Access-Control-Allow-Origin' header"错误怎么办？
解答：这是跨域请求被浏览器拦截导致的，需在后端PHP代码中添加以下header：

header('Access-Control-Allow-Origin: '); // 允许所有域名访问

问题2：如何防止SQL注入攻击？
解答：使用PDO的预处理语句代替直接拼接SQL，修改查询代码如下：

$stmt = $conn->prepare("SELECT  FROM categories");
$stmt->execute();
$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);