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

Question

我正在使用AjaxForm插件提交我的表单而不刷新.喜欢:

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

        //something on success or fail
    });

这工作正常.当我点击提交按钮时,它保存表单数据而不刷新.但在此之前; 我在我的模板文件上有django消息,如:

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

如果帖子保存正确或出现故障,此代码的作用是显示通知.

现在; 我做不到.我不明白我如何使用这些消息标签与ajax功能.

它只是保存帖子.没有通知.

谢谢.

编辑:

add_post网址: url(r'^admin/post/add/$', view='add_post',name='add_post'),

相关观点:

@login_required(login_url='/login/')
def add_post(request):
    template_name = 'add.html'
    owner = request.user
    if request.method == "POST":
        form = addForm(request.POST)
        if form.is_valid():
            titleform = form.cleaned_data['title']
            bodyform = form.cleaned_data['body']
            checkform = form.cleaned_data['isdraft']

            n = Post(title=titleform, body=bodyform, isdraft=checkform, owner=owner)
            n.save()
            messages.add_message(request, messages.SUCCESS,
                'New post created successfully!')
        else:
            messages.add_message(request, messages.WARNING,
                'Please fill in all fields!')
    else:
        form = addForm()
    return render_to_response(template_name, {'form': form, 'owner': owner,},
        context_instance=RequestContext(request))

Answer 1

这些是帮助我解决问题的工具/方法.首先,我有一个名为的辅助工具方法render_to_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:

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

当创建消息以响应AJAX请求时,我使用Django render_to_string将消息打包成一个字符串,该字符串存储在data字典中,然后使用my render_to_json返回一个适当的响应:

def my_custom_view(request)
    # ...  your view code
    data = {
        'msg': render_to_string('messages.html', {}, RequestContext(request)),
    }
    return render_to_json(request, data)

然后,在我的jQuery $.post(...)回调函数中,我检查response对象是否具有msg属性,然后将内容插入response.msg到我想要的DOM中,如果需要,可以使用jQuery转换.我的base.html模板包含<ul>消息的容器:

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

请注意,上面的内容包括messages.html在您希望在实际页面加载(非AJAX请求)上显示消息的情况 - 如果没有消息,它是空白的,但是<ul>仍然可以将AJAX接收的消息推送到.

最后一部分是我在任何$.post(...)回调中用来显示消息的Javascript函数(需要jQuery):

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

Answer 2

我在这里找到了一种更简单的方法,我采取了一些想法,这是我的结果:

您只需像往常一样创建消息,然后在发送响应之前将其放入dicts列表中:

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){
                                    ...                                                                             
                                }
                            },

和update_messages函数:

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

}

它工作得很好,我发现很容易实现

Answer 3

这是一个简单的想法。

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

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

代替：

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

在 add.html 中，添加另一个，例如：

{% if messages %}
<ul class="hidden-messages" style="display:none">
    {% for message in messages %}
        <div id="notice" align="center">
            {{ message }}
        </div>
    {% endfor %}
</ul>
{% endif %}

ajaxForm 看起来像：

$('#your_form_id').ajaxForm({
    success: function(responseText) {
        var newMessages = $(responseText).find('.hidden-messages').html();
        $('#messages').append(newMessages);
    },
});