使用 Flask 和 Jinja2 单击时无法加载模板 HTML [重复]

Posted 2023-05-07

【中文标题】使用 Flask 和 Jinja2 单击时无法加载模板 HTML [重复]

【英文标题】：Trouble loading template HTML on click using Flask and Jinja2 [duplicate]

【发布时间】：2019-05-10 20:15:27

【问题描述】：

我相信我对 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 永远不会起作用。所以我对如何有条件地使用烧瓶渲染 html 感到困惑。如果我将上面的 home.html 替换为 % include sighting.html %，则会呈现 html，但它没有来自查询的数据（显然），所以它只有我给它的默认 elseif 值。

编辑： 我了解如何使用 jquery 更改 html。但根据烧瓶文档，我的印象是您可以使用 jinja2 和烧瓶模板呈现动态 html。如果解决方法是“只使用 ajax 表单和 jquery 来实现更改”，那很好，我将重新评估。但是有没有办法在某个条件下调用路由并基于该路由渲染模板。

【问题讨论】：

$( "td" ).click(function() 你的表单或提交在哪里？

您介意解释一下您的意思吗？我将数据变量 comname 传递给烧瓶，然后尝试渲染模板化的 html。

【参考方案1】：

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