Django-如何在ajax函数下显示消息

我正在使用AjaxForm插件提交我的表单，无需刷新。比如：

$('#my_form_id').ajaxForm(function(){

        //something on success or fail
    });

这是正确的。当我点击提交按钮时，它保存表单数据而不刷新。但在此之前,；我的模板文件中有django消息，如：

{% for message in messages %}
    <div id="notice" align="center">
        {{ message }}
    </div>
{% endfor %}

这里有一个简单的想法

在layout.html中为消息添加占位符，这允许在javascript中附加新消息：

<div id="messages">
{% for message in messages %}
    <div id="notice" align="center">
        {{ message }}
    </div>
{% endfor %}
</div>

---

这些是帮助我解决问题的工具/方法。首先，我有一个名为

render\u to\u json

的助手实用程序方法：

# `data` is a python dictionary
def render_to_json(request, data):
    return HttpResponse(
        json.dumps(data, ensure_ascii=False),
        mimetype=request.is_ajax() and "application/json" or "text/html"
    )

我有一个

messages.html

模板来为弹出消息呈现必要的html：

然后，在我的jQuery

$.post（…）

回调函数中，我检查

response

对象是否具有

msg

属性，然后将

response.msg

的内容插入到我想要的DOM中，如果需要，可以使用jQuery转换。My

base.html

模板包含消息的

容器：

{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}

<ul id="popup-messages-content">
    {% include 'messages.html' %}
</ul>

function showPopupMessage(content) {
    var elMessages = $('#popup-messages-content');
    if (elMessages.length && content) {
        elMessages.html(content);
    }
}

---

我找到了一种更简单的方法，我采纳了其中的一些想法，这就是我的结果：

您只需像往常一样创建消息，然后在发送响应之前将其放入一个目录列表：

django_messages = []

for message in messages.get_messages(request):
    django_messages.append({
        "level": message.level,
        "message": message.message,
        "extra_tags": message.tags,
})

然后添加任何数据和消息并序列化，例如：

data = {}
data['success'] = success
data['messages'] = django_messages

return HttpResponse(simplejson.dumps(data), content_type="application/json")

最后，在您的ajax中：

success: function(data){
                                success = data.success;
                                update_messages(data.messages);
                                if (success){
                                    ...                                                                             
                                }
                            },

以及“更新消息”功能：

function update_messages(messages){
$("#div_messages").html("");
$.each(messages, function (i, m) {
                $("#div_messages").append("<div class='alert alert-"+m.level+"''>"+m.message+"</div>");
            });

功能更新消息（消息）{
$（“#div_messages”）.html（“”）；
$。每个（消息、函数（i、m）{
$（“#div_消息”）。在模板中追加（）

<div id="ajax_message">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}  fade show">
                {{ message|safe }}
            </div>
        {% endfor %}
    {% endif %}
</div>

或

你应该粘贴你的url和view.added url和view part.hmmm。你能给我写一些解释代码吗？让我正确地理解它吗？如果这提供了你需要的答案，你能将其标记为这样吗？谢谢！这很尴尬…很抱歉反应太晚。刚刚接受了：）你的
m.div\u messages
变量不应该分别是
m.level
和
m.message
吗？你也不想要
message.level\u tag
而不是
message.level
？你对变量的看法是对的，只是把代码翻译成英语时的一个错误。关于level\u tag vs level我不确定，我不知道我没有在我的代码中使用它。谢谢你的更正。
django_messages = []

for message in messages.get_messages(request):
    django_messages.append({
        "level": message.level,
        "message": message.message,
        "extra_tags": message.tags,
})

data = {}
data['success'] = success
data['messages'] = django_messages

return HttpResponse(simplejson.dumps(data), content_type="application/json")

success: function(data){
                                success = data.success;
                                update_messages(data.messages);
                                if (success){
                                    ...                                                                             
                                }
                            },

function update_messages(messages){
$("#div_messages").html("");
$.each(messages, function (i, m) {
                $("#div_messages").append("<div class='alert alert-"+m.level+"''>"+m.message+"</div>");
            });

<div id="ajax_message">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}  fade show">
                {{ message|safe }}
            </div>
        {% endfor %}
    {% endif %}
</div>

$("#ajax_message").load("this_url #ajax_message");

function alert_message() {
    var pathname = window.location.pathname;
    $("#ajax_message").load(pathname+" #ajax_message");
}