jquery - 使用 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>'))
}