Question

我相信我对Jinja模板的呈现方式有一个基本的误解。我试图通过GET请求将数据传递到烧瓶后端，以该数据为参数运行查询，然后使用给定的查询信息呈现一个jinja子模板。

这是我简单的javascript函数，单击注册，它可以很好地运行查询。我什至不认为成功标签中需要任何东西。

$( "td" ).click(function() {

    var comname = $(this).text();

    $.ajax({
        type: 'GET',
        url: "/getSightings",
        data: {name: comname},
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
          var result =data.result;
      }
    });
  });

在这里，我将结果格式化为JSON dict，然后尝试呈现Sighting.html。我的“基本” html称为home.html，我在@ app.route（'/'）

时立即渲染

@app.route('/getSightings')
def getSightings():
    js = request.args.get('name')

    with conn:
        print("this is the data" + js)

    sql = ('SELECT PERSON, LOCATION, SIGHTED, GENUS, SPECIES '
           'FROM SIGHTINGS AS S, FLOWERS AS F '
           'WHERE S.NAME  = F.COMNAME '
           'AND NAME = ?'
           'ORDER BY S.SIGHTED DESC '
           'LIMIT 10; ')

    cur = conn.cursor()
    cur.execute(sql, (js, ))

    r = [dict((cur.description[i][0], value) \
               for i, value in enumerate(row)) for row in cur.fetchall()]

    return render_template('sighting.html', result=r)

这是我的home.html，我尝试在其中链接到子模板

<div id="sighting" class="background p-2">
        {% block sighting %}{% endblock %}
</div>

这是我的sighting.html

{% extends "home.html" %}
{% block sighting %}
<script type="text/javascript">
  console.log("loaded");
</script>
{% if result%}
<h2 class="flower-name">PLAINTEXT</h2>
<div class="table-wrapper-scroll-y wrap">

  <table class="table table-hover" id="sightingsTable">
    <tbody>
      {% for item in result %}
    <tr>
      <td>{{item["PERSON"]}}</td>
      <td>{{item["LOCATION"]}}</td>
      <td>{{item["SIGHTED"]}}</td>
      <td>{{item["GENUS"]}}</td>
      <td>{{item["SPECIES"]}}</td>
    </tr>
    {% endfor %}
  </tbody>
  </table>
</div>
{% else %}
  <p>Didn't work</p>
{% endif %}
{% endblock %}

没有给出错误，但是模板从不呈现，console.log从不运行。因此，我对如何使用flask有条件地呈现html感到困惑。如果我将以上home.html替换为{％includeSighting.html％}，则会呈现html，但是（显然）它没有来自查询的数据，因此它只有我提供的默认{elseif}值。

编辑：我了解如何使用jquery更改html。但是根据flask文档，我给您的印象是您可以使用jinja2和flask模板呈现动态html。如果解决方法是“仅使用ajax表单和jquery来实现更改”，那就可以了，我将重新评估。但是，在某种情况下，没有办法调用路由并根据该路由渲染模板。

Answer 1

您的误解不是与Jinja有关，而是与Ajax有关。您的函数正确呈现Jinja模板，并将其返回给Ajax成功函数，该函数对此不执行任何操作。您需要在该成功函数中执行一些操作，以将响应插入到现有页面中。

使用Flask和Jinja2单击时无法加载模板HTML

1 个答案: