Flask Dynamic依赖下拉列表

Question

Flask Dynamic依赖下拉列表

ben*_*ben 5 html javascript python jquery flask

我开始阅读一些Flask应用程序编程，并且一直在尝试使下拉菜单正常工作，但到目前为止我还没有运气。我想做的是，当用户从第一个下拉列表中选择一种食物类型时，它应该从数据库中获取相应的列表，并填充第二组下拉列表。一旦做出选择，我不知道如何使它发送快速请求。我真的不明白该怎么办。

<body>
  <div>
    <form action="{{ url_for('test') }}" method="POST">
      <div>
        <label>Food:</label>
        <select id="food" name="food" width="600px">
        <option SELECTED value='0'>Choose your fav food</option>  
        {% for x in food %}
          <option value= '{{ x }}'>{{x}}</option>
        {% endfor %}
      </select>
        <!-- After a selection is made, i want it to go back to the database and fectch the results for the below drop box based on above selection -->
      </div>
      <div>
        <label>Choose Kind of Food:</label>
        <select id="foodChoice" name="foodChoice" width="600px">
        <option selected value='0'>Choose a kind</option>
        {% for x in foodChoice %}
          <option value= '{{ x }}'>{{x}}</option>
        {% endfor %}
      </select>
      </div>
      <div>
        <input type="submit">
      </div>
    </form>
  </div>

Run Code Online (Sandbox Code Playgroud)

app.html

@app.route('/', method = ['GET', 'POST'])
def index():
    foodList = [ i.type for i in db.session.query(FoodType)]
    return render_template('main.html', food=foodList)

@app.route(/foodkind', method = ['GET', 'POST'])
def foodkind():
        selection = request.form['foodChoice']
        foodKind = [ i.kind for i in db.session.query(FoodType).filter(FoodKind == selection)]
        return render_template('main.html', foodChoice = foodKind)

Run Code Online (Sandbox Code Playgroud)

我已经看过许多问题，但还没有找到任何简单的方法对我有帮助。如果有人可以为我演示代码，这样我可以查找并学习，那就太好了。

Answer 1

MrL*_*eeh 6

您需要在此处使用Ajax来检索食物列表，具体取决于您选择的食物种类。因此，在模板中，您将需要包含以下内容：

<html>
  <head>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
    </script>

    <script>
      $(document).ready(function() {
        $('#foodkind').change(function() {

          var foodkind = $('#foodkind').val();

          // Make Ajax Request and expect JSON-encoded data
          $.getJSON(
            '/get_food' + '/' + foodkind,
            function(data) {

              // Remove old options
              $('#food').find('option').remove();                                

              // Add new items
              $.each(data, function(key, val) {
                var option_item = '<option value="' + val + '">' + val + '</option>'
                $('#food').append(option_item);
              });
            }
          );
        });
      });
    </script>
  </head>

  <body>
    <form>
      {{ form.foodkind() }}
      {{ form.food() }}
    </form>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

此代码将对JSON编码的数据进行速记Ajax请求。该数据包含食物选择框的值列表。

为此，您需要/get_food/<foodkind>在Flask视图中添加一个端点：

food = {
    'fruit': ['apple', 'banana', 'cherry'],
    'vegetables': ['onion', 'cucumber'],                                                 
    'meat': ['sausage', 'beef'],
}


@app.route('/get_food/<foodkind>')
def get_food(foodkind):
    if foodkind not in food:                                                                 
        return jsonify([])
    else:                                                                                    
        return jsonify(food[foodkind])

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	7655 次
最近记录：	8 年，6 月前