使用Flask和Jinja2点击加载模板HTML时遇到问题[重复]

Question

这个问题在这里已有答案：

• How to replace innerHTML of a div using jQuery? 12个答案

我相信我对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>

这是我的目击

{% 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永远不会运行。所以我很困惑，我怎么能有条件地使用烧瓶渲染html。如果我用{％include sighting.html％}替换上面的home.html，则会呈现html，但它没有查询中的数据（显然），所以它只有我给它的默认{elseif}值。

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

Answer 1

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