在向Flask发出jQuery AJAX请求后渲染Jinja

Question

我有一个Web应用程序，当HTML中的 select 元素发生更改时，它会从 Flask 获取动态数据。当然这是通过 jquery ajax 完成的。没有probs在这里我得到了。

问题是，动态数据 - 由Flask发送 - ，是数据库 Flask-sqlalchemy 中的对象列表。

当然，数据会以 JSON 的形式从 Flask 发送。

我希望使用 Jinja 遍历这些对象以显示其信息。

HTML

<select id="#mySelect">
    <option value="option1" id="1">Option 1 </option>
    <option value="option2" id="1">Option 2 </option> 
    <option value="option3" id="3">Option 3 </option>
</select>

的jQuery

$('body').on('change','#mySelect',function(){
   var option_id = $('#mySelect').find(':selected').attr('id');
   $.ajax({
     url: "{{ url_for('_get_content') }}",
     type: "POST",
     dataType: "json",
     data: {'option_id':option_id},
     success: function(data){
       data = data.data;
      /* HERE I WANT TO ITERATE THROUGH THE data LIST OF OBJECTS */
     }

   });
});

烧瓶

@app.route('/_get_content/')
def _get_content():
    option_id = request.form['option_id']
    all_options = models.Content.query.filter_by(id=option_id)
    return jsonify({'data': all_options})

PS：我知道jinja首先被渲染，所以没有办法将jQuery变量分配给Jinja。那么，如果我不能在Jinja中使用它，我将如何迭代数据列表呢？

Answer 1

好的，我明白了。

简单地说，我制作了一个外部 html 文件，并为其添加了所需的 jinja 模板。

{% for object in object_list %}
   {{object.name}}
{% endfor %}

然后在我的 Flask 文件中，我确实将 render_template 响应返回到 jquery （其中包含 HTML 我想补充一下）

objects_from_db = getAllObjects()
return jsonify({'data': render_template('the_temp.html', object_list=objects_from_db)}

然后只需将响应中的HTML附加到要更新的所需div。

Answer 2

如果您使用json发送数据，则不需要使用Jinja2。你可以尝试这样的事情：

@app.route('/_get_content/')
def _get_content():
    option_id = request.form['option_id']
    all_options = models.Content.query.filter_by(id=option_id)
    return jsonify({'data': [option.name for option in all_options]})

或在模型中定义类似to_json的方法，返回字段或字典或...并在视图中调用它。

@app.route('/_get_content/')
def _get_content():
    option_id = request.form['option_id']
    all_options = models.Content.query.filter_by(id=option_id)
    return jsonify({'data': [option.to_json() for option in all_options]})