使用 MySQL 数据库中的数据使用 Flask 和 jQuery 填充下拉列表

Question

我正在制作一个非常小的网站，其中将根据下拉选择显示数据库信息。 假设我的数据库包含 2 个表，第一个表是带有 ID 和名称的公司。另一个员工与这些公司“联系”。例如：

╔═════════════╦════════════╗
║ company_ID  ║ company    ║
╠═════════════╬════════════╣
║ 1           ║ Google     ║ 
║ 2           ║ H&M        ║ 
║ 3           ║ IKEA       ║ 
╚═════════════╩════════════╝

╔═════════════╦═════════════════╗
║ company_ID  ║ employee        ║
╠═════════════╬═════════════════╣
║ 1           ║ Google_emp1     ║ 
║ 1           ║ Google_emp2     ║ 
║ 2           ║ H&M_emp1        ║ 
║ 1           ║ Google_emp3     ║ 
║ 3           ║ IKEA_emp1       ║ 
║ 3           ║ IKEA_emp2       ║ 
║ 2           ║ H&M_emp2        ║ 
╚═════════════╩═════════════════╝

当在下拉列表中选择“Google”时，company_ID 为 1 的所有员工都应该显示在第二个下拉列表中（因为在这种情况下 Google 的 ID 为 1）。

问题：
我需要将我的 Flask 变量传递给 .js 文件以填充下拉列表。
目前python文件的重要部分如下所示：

def database():
    c, conn = connectionDB()

    compDB = c.execute("SELECT * FROM Companies")
    compDB = c.fetchall()

    empDB = c.execute("SELECT * FROM Employees")
    empDB = c.fetchall()

    return render_template("database.html", 
                            compDB = compDB,
                            empDB = empDB,
                            HEADERTEXT_LIST = HEADERTEXT_LIST)

我的 .html 文件的重要部分如下所示：

<select class="chzn-select" id="company" data-placeholder="Choose company" name="company">
    <option value=""></option>    
<!--Here is the appending supposed to start-->
</select>

<select class="chzn-select" id="employee" data-placeholder="Choose employee" name="employee">
    <option value=""></option>    
<!--Here is the appending (depending on company) supposed to start-->
</select>

（我其实有好几层，但原理是一样的）

我的 .js 文件看起来像这样（我使用选择作为样式）：

$(function () {
            $('.chzn-select').chosen({
                no_results_text: "No results for: ",
                search_contains: true,
                single_backstroke_delete: false,
                disable_search: false,
                width: "200px",
            });
            $('#company').append($('<option value=""></option>'));
            $('#company').trigger("chosen:updated");

        });

我的数据库信息应该这样输入：

<option value="company_id">company</option>

问题 1：
如何从 .py 文件传递​​这些变量，以便它们可以被 .js 文件操作？
我的意思是，我可以使用 Flask-logic，但这只能在我的 .html 文件中进行解释。
问题 2：
填充这些的最聪明的方法是什么？某种for循环？我对 javascript 完全陌生，很抱歉可能会问一些显而易见的问题。
谢谢！

Answer 1

如果您在 Flask 中使用 Jinja2 模板，则可以在 Python 中创建 JSON 对象，例如，您可以使用 Python 逻辑从查询结果中创建如下所示的对象：

object = [
    {"id": 1, "company": "Google", "employees": [
       {"name": "Mike"},
       {"name": "Jessica"},
    ]},
    {"id": 2, "company": "H&M", "employees": [...]},
    {"id": 3, "company": "Ikea", "employees": [...]},
]

将此对象添加到您的 render_template 调用中：

return render_template("database.html", 
                        compDB = compDB,
                        empDB = empDB,
                        javascript = object,
                        HEADERTEXT_LIST = HEADERTEXT_LIST)

然后，在您的模板 HTML 中，您需要使用 2 个内置 Jinja2 过滤器将变量呈现为 JSON（这是 Flask 的默认部分）。然后这里是我用来动态更新选择的 jQuery 代码。

<script type="text/javascript">

    var myVariable = {{ javascript|tojson|safe }};

    var selectCompany = $('#company');
    var selectEmployee = $('#employee');

    selectCompany.empty();
    $.each(myVariable, function (index, value) {
        selectCompany.append(
            $('<option>', {
                value: index,
                text: value.name
            }, '</option>'))
    });

    updateEmployeeSelect();

    selectCompany.on('change', function() {
        updateEmployeeSelect();
    });

    function updateEmployeeSelect() {
        var selected = selectCompany.val();

        selectEmployee.empty();
        $.each(myVariable[selected].employees, 
            function (index, value) {
                selectEmployee.append(
                    $('<option>', { 
                        value: index, text: value.name
                    }, '</option>'))
            });
        }
    }
</script>

另外——更新，刚刚意识到我在上面使用了 jQuery，但没有明确说明。您可以将 jQuery $.each() 调用替换为基本的 for javascript for 循环，例如像这样的模式：

for (var a = 0; a < myVariable.length; a++) {
    selectCompany.append(
        $('<option>', {
            value: a,
            text: myVariable[a].name
        }, '</option>'))
}