如何在 Jinja2 中动态设置 HTML 表单操作 url？答案

【问题标题】：How to dynamically set HTML form action url in Jinja2?如何在 Jinja2 中动态设置 HTML 表单操作 url？
【发布时间】：2019-11-14 02:29:40
【问题描述】：

我正在尝试使用 jinja2 在烧瓶中实现一个管理页面，其中用户列表以表格形式显示。这些列是用户 ID、用户名和删除按钮列，其中只有每个用户的删除按钮。表格如下：

   <table class="table">
        <thead>
            <tr>
            <th scope="col">#</th>
            <th scope="col">Username</th>
            <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>

            {% for i in users.items %}
            {% set temp= i.id %}

            <tr>
                <th id="this_id" scope="row">{{i.id}}</th>
                <td>{{ i.username }}</td>
                <td><button type="button" id="delete-button" onclick="button_listen(this)" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal2">Delete</button></td>
            </tr> 

            {% endfor %}
        </tbody>
    </table>

点击删除按钮后，会打开一个确认删除操作的模式

<div class="modal fade" id="deleteModal2" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="deleteModalLabel">Are you sure you want to delete?</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      <form id="modal_form" method="POST">
          <input class="btn btn-danger" action="{{url_for('users.delete_user', user_id=2)}}" type="submit" value="Delete">
      </form>
    </div>
  </div>
</div>

正如您在输入表单中看到的，action 属性将 url 重定向到路由。我想在单击删除按钮时动态设置此操作属性。我曾尝试使用 javascript 在单击删除按钮时构造动作属性字符串：

function button_listen(button_id) {
      const u_id=button_id.parentElement.parentElement.childNodes[1].childNodes[0].data;
      const comm1="{% raw %} {{url_for('users.delete_user', user_id={%endraw%}"
      const comm2=")}}"
      const fin=comm1+u_id+comm2
      document.getElementById("modal_form").setAttribute("action", fin)}

但这并没有导致 Jinja2 将字符串识别为 python 代码，而是将我路由到这样的地址：

http://localhost/{{url_for('users.delete_user',user_id=2)}}

我怎样才能让它工作，以便正确解释路线？

【问题讨论】：

标签： javascript html python-3.x flask jinja2

【解决方案1】：

原因是Jinja2渲染之前JS中的concatenate不会被JS之前运行的Jinja2运行。因此，以下内容将无法按预期工作（如您所见）：

  const u_id=button_id.parentElement.parentElement.childNodes[1].childNodes[0].data;
  const comm1="{% raw %} {{url_for('users.delete_user', user_id={%endraw%}"
  const comm2=")}}"
  const fin=comm1+u_id+comm2

上面的代码不会被 Jinja2 渲染，因为它不会被识别为 Jinja2 语句。 Jinja2 在 JavaScript 之前执行。实现您想要的一种方法可能是尝试将 Jinja2 的 form_url 呈现为 {{ form_url }}，检查它是否实际呈现为 URL，然后使用 JavaScript 操作该 URL，以便它也采用 u_id 参数，也许作为路径参数。

例如，使用 Python/Jinja2 创建 form_url，使其变为类似于 /action/delete/，然后使用 JavaScript 为 URL 添加路径参数，以便特定用户 ID 的 URL 变为 /action/delete/42 .

我实际上并没有尝试过，但我希望它会起作用。

【讨论】：