当前位置：首页 > 行业动态 > 正文

从数据库读取下拉列表

admin
行业动态
2025-03-21
1

从数据库读取下拉列表，需先连接数据库，再执行查询语句获取数据。

从数据库读取下拉列表通常涉及到后端代码与数据库的交互，以及前端页面展示下拉列表的过程，以下是一个详细的步骤说明，包括伪代码和示例代码片段，帮助你理解如何实现这一功能。

设计数据库

假设我们有一个名为categories 的数据库表，其中包含以下列：

字段名	数据类型	描述
id	INT	主键，自增
name	VARCHAR	类别名称

2. 后端代码（以Python + Flask为例）

从数据库读取下拉列表

a. 设置Flask应用并连接数据库

from flask import Flask, render_template, jsonify
import pymysql
app = Flask(__name__)
配置数据库连接
db_config = {
    'host': 'localhost',
    'user': 'yourusername',
    'password': 'yourpassword',
    'database': 'yourdatabase',
    'charset': 'utf8mb4',
    'cursorclass': pymysql.cursors.DictCursor
}
connection = pymysql.connect(db_config)

b. 创建路由以获取下拉列表数据

@app.route('/get_categories')
def get_categories():
    try:
        with connection.cursor() as cursor:
            sql = "SELECT id, name FROM categories"
            cursor.execute(sql)
            result = cursor.fetchall()
        return jsonify(result)
    except Exception as e:
        return str(e)

c. 运行Flask应用

if __name__ == '__main__':
    app.run(debug=True)

3. 前端代码（HTML + JavaScript）

a. 创建HTML文件以显示下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="categorySelect">
        <option value="">请选择类别</option>
    </select>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: '/get_categories',
                type: 'GET',
                success: function(data){
                    $.each(data, function(index, category){
                        $('#categorySelect').append('<option value="'+ category.id +'">'+ category.name +'</option>');
                    });
                },
                error: function(error){
                    console.log(error);
                }
            });
        });
    </script>
</body>
</html>