Flask flash 和 url_for 与 AJAX

Question

我目前被困在一个相当“大”的问题上，我会尽量做到简洁明了。 我正在使用 Flask 在 Python 中开发一个工具。它应该是一个内部网。这个想法是我有一个客户页面。有它的名字、许多其他信息和一个庞大的清单。

信息已经写入输入字段，因此用户只需在那里编辑它们，按回车键，页面就会重新加载编辑后的信息（带有通知，使用闪烁的消息和咆哮）。

庞大的清单迫使我转向使用 AJAX 的系统，因为我希望它在用户勾选框并在输入中输入内容时“实时”更新，而无需重新加载页面。

因此，我还将信息的基本输入切换为 AJAX，以避免重新加载页面。

我遇到了两个问题：

1. 第一个是Flask的消息闪烁功能。

   我有一个方法可以更新数据库中的客户端名称，显示一条消息（成功或失败，取决于很多事情），然后再次显示该页面。为了避免页面重新加载，我使用 AJAX 管理表单提交。

   问题是，我的 python 方法会闪烁消息。一旦我回到我的 html 页面（没有重新加载，因为它是 AJAX），Jinja2 的 get_flashed_message 函数没有返回任何内容，因为它还没有更新。因此，我无法检索那些闪现的消息。

   我怎样才能得到这些？我看到的唯一解决方案是摆脱对 flash 的任何使用，并编写我自己的消息系统，我将从该方法返回，然后在 javascript 中处理。这看起来非常愚蠢，因为 flash 是 Fl​​ask 的一个特性，而 AJAX 使它变得“无用”。我觉得我错过了什么。

   （请注意，到目前为止，我的闪烁消息管理是在我的基本布局中进行的，它调用一个贯穿所有消息并将它们显示为咆哮通知的模板）

2. 第二个问题涉及 url_for。 这是我的表格，用于编辑客户姓名：

<form id="changeClientName" method="POST" action="{{ url_for('clients.edit_client_name', name=client.name) }}" style="display:inline !important;">
    <input type="text" name="name" class="form-control" value="{{ client.name }}" >
    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>

如您所见，action 属性使用url_for 调用正确的方法来编辑客户端。我的方法是这样的：

@mod.route('/edit/<name>/', methods=['POST'])
def edit_client_name(name):
    # code here    

以/edit/the_client_name 和/edit/the_new_client_name 为例，编辑客户端名称前后的端点。显然，一旦调用了该方法，我的 AJAX 必须更改此操作属性以将其替换为新 URL（以防用户想要重新编辑名称而不更改页面/重新加载页面）。这是我的第二个问题。

新名称存储在 javascript 中，而操作仍然是旧端点。因此，我必须使用新名称调用url_for。而且我找不到将 Javascript 变量传递给 Jinja2 的方法。

我想要这个：

url_for('clients.edit_client_name', name=client.name)

变成这样：

url_for('clients.edit_client_name', name=my_javascript_variable_one_way_or_another)

我只需要调用修改表单属性的 javascript 函数，并使用这个新的url_for 修改我的操作属性。但我发现没有办法做到这一点，即将一个 javascript 变量传递给 Jinja2。

---

所以这是我的两个问题。如何使flash() 与 AJAX 兼容？另外，如何将 javascript 属性传递给 Jinja2 ？

我能看到的唯一解决方案是编写我自己的消息传递系统，这会破坏 Flash 的目标，使其无法与 AJAX 一起使用，这看起来很愚蠢，并且在我的模板中硬编码 URL，这完全破坏了最初的兴趣Flask 使 URL 独立于方法，并且 URL 更改非常灵活。

谢谢。

Answer 1

我会尝试一下，但我不确定我是否完全理解这个问题：D。下面的代码未经测试，更像是伪代码！

您的第一个问题是（如果我理解正确的话）您正在通过 ajax 进行部分更新，并且希望在部分更新之后获取更新结果。 稍后，您应该在每次 ajax 调用之后返回更新结果，而不是获取更新结果。因此，如果您有如下所示的更新代码：

data = $('#my-form').serialize()
$.post(update_url, data, function (results) {
    // Here you check results.
    if (results.success) {
        $('#update-div').message('Update Success')
    } else {
        $('#update-div').message('Update Failed: ' + results.error_msg)
    }
})

那么你的更新路线将有类似这样的代码：

from flask import jsonify

@app.route('/partialupdate/<int:userid>', methods=['POST'])
def partial_update(userid):
    try:
        # fetch the user, perform the updates and commit
        return jsonify(success=1)
    except Exception, e:
        return jsonify(success=0, error_msg=str(e))

您的第二个涉及 URL 生成的问题可以通过使用 USERID 而不是客户端名称来解决。 切勿将客户端名称用于搜索以外的任何内容：D。在这种情况下，使用用户 ID。用户 ID 通常是数据库中特定用户的主键。如果您不使用数据库，则以某种方式生成您自己的用户 ID 并将其附加到用户 - 它应该是每个用户的唯一编号。使用用户 ID 意味着您始终可以使用 '/edituser/1' 之类的 url 进行编辑。

Answer 2

我也有这个要求。为了充实 Paul Wand 的答案，我是这样做的（注意，生成的标记是针对引导程序 3：

为模板中的 Flash 消息放置一个空 div：

<div id="flash"></div>

你的 ajax 调用：

$.post("/foo/bar", JSON.stringify({'calls': 'whatever'}), function(returnedData) {
    $('#flash').append(flashMessage(JSON.parse(returnedData)));
});

并使用解析功能：

var flashMessage = function(data){
  html = '';
  for (i=0; i<data.length; i++) {
    html += '<div class="alert alert-' + data[i]['type'] + '"><a href="#" class="close" data-dismiss="alert">&times;</a>' + data[i].message + '</div>';
  }
  return html;
};

在处理 AJAX 请求的路由中，只需返回如下所示的 JSON 对象：

[{'type': 'success', 'message': 'Here is a message'}]

“类型”是引导 3 状态类型，即。成功、信息、警告、危险。 dict 被包装在一个列表中，因此您可以根据需要传递多个。

如果响应已经 json 化，则不需要 JSON.parse。在这种情况下，代码很简单：

$('#flash').append(flashMessage(returnedData));

另外，如果您不需要多条 flash 消息，只需将 'append' 替换为 'html'

Answer 3

通过了解 flash_message.html 的格式，您可以编写一个简单的 javascript 方法来替换烧瓶“flash”方法的功能。

function flash(message,category){
   if (category == 'error'){
      var icon='icon-exclamation-sign';
      category='danger';
      }
   else if (category == 'success')
      var icon='icon-ok-sign';
   else
      var icon='icon-info-sign';      
   $('<div class="alert alert-'+category+'"><i class="'+icon+'"></i>&nbsp;<a class="close" data-dismiss="alert">×</a>'+ message +'</div>').prependTo('#maincontent').hide().slideDown();
   $.smoothScroll({
     scrollElement: $('body'),
     scrollTarget: '#mainContent'
   });
}

url_for 可能有点棘手，但可能。

Answer 4

非常老的问题，但我遇到了同样的问题，并找到了一种通过 ajax 获取烧瓶闪烁的 hacky 解决方法。基本上我所做的是我做了一个 get_flashes 路由，它返回 flashes 模板，我通过 jQuery 的加载函数使用这个路由，例如。 $('#msg-div').load('{{ url_for('main.get_flashes') }}'

get_flashes 路由：

@main.route('get-flashes')
def get_flashes():
    return render_template('_flashes.html')

_flashes.html（获取闪光灯的模板，更多信息请参见flask's docs）

{%- with messages = get_flashed_messages(with_categories=true) -%}
    {% if messages %}
        {% for category, message in messages %}
            {% if category == 'error' %}
            <div class="alert alert-danger alert-dismissable fade show msg" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% else %}
            <div class="alert alert-{{ category }} alert-dismissable fade show msg" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endif %}
        {% endfor %}
    {% endif %}
{%- endwith %}