Question

我有一个带有MySQL的Flask后端，需要从表中提取值以显示在下拉列表中。

我有一个包含Banana，Apple，Orange等单值的表格。

在我的html代码中，如果用户选择另一个下拉列表（硬编码），则显示该选项，因此代码如下所示：

$(function() {
        $("#inputType").change(function() {
            var myform = "<div id=\"newForm\">"
            +"<label for=\"inputFruit\">Fruit:</label>"
            +"<select class=\"form-control\" id=\"inputFruit\" required>"
            +"<option></option>"
            +"</select>"
            if ($("#inputType").val() == "fruits") {
                $(myform).insertBefore("#btnSignUp");
            } else {
                $("#newForm").remove();
            }

在我的烧瓶应用程序中：

@app.route('/getFruits') # gets my fruits as a list and returns

我在哪里添加代码，以便将我从/ getFruits获取的值放入HTML中的选项？

Answer 1

您可以将上下文数据（水果列表）传递到模板的javascript代码中，使用JSON将满足您的要求：

您的观点：

import json

@app.route('/getFruits')
def my_view():
    data = ['Banana', 'Apple', 'Orange', 'Pear', 'Watermalon'] # you can get list from your DB instead
    return render_template('yourtemplate.html', data=json.dumps(data))

您的模板：

$(function() {
        $("#inputType").change(function() {
            var myform = "<div id=\"newForm\">"
            +"<label for=\"inputFruit\">Fruit:</label>"
            +"<select class=\"form-control\" id=\"inputFruit\" required>"
            {% for item in data %}
            +"<option>{{ item|safe }}</option>"
            {% endfor %}
            +"</select>"
            if ($("#inputType").val() == "fruits") {
                $(myform).insertBefore("#btnSignUp");
            } else {
                $("#newForm").remove();
            }

从MySQL数据库Python

1 个答案: