使用Flask和Jinja2在单击时加载模板HTML时出现问题

Question

我相信我对Jinja模板是如何呈现的有一个基本的误解。我正在尝试通过GET请求将数据传递到flask后端，将该数据作为参数运行查询，然后使用给定的查询信息呈现jinja子模板。你知道吗

下面是我的简单javascript函数click registers，它可以很好地运行查询。我甚至不相信我需要任何成功的标签。你知道吗

$( "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并尝试呈现瞄准.html. 我的“基本”html被称为主页.html，我立即呈现@应用程序路径（'/'）

@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)

这是我的主页.html尝试链接到子模板的位置

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

这是我的瞄准.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 %}

不会给出任何错误，但从未呈现模板，并且控制台.log从不工作。所以我很困惑如何有条件地使用flask呈现html。如果我替换上面的主页.html包含{%include瞄准.html%}，html被呈现，但是它没有来自查询的数据（显然），所以它只有我给它的默认值{elseif}。你知道吗

编辑： 我了解如何用jquery更改html。但是基于flask文档，我认为可以使用jinja2和flask模板呈现动态html。如果解决方法是“只使用ajax表单和jquery来实现更改”，那么没关系，我将重新评估。但在一定条件下，没有办法调用路由并基于该路由呈现模板。你知道吗

Answer 1

你的误解不在于Jinja，而在于Ajax。您的函数正确呈现Jinja模板并将其返回给Ajax success函数，该函数。。。什么都不做。您需要在success函数中执行一些操作，以便将响应插入到现有页面中。你知道吗