通过 AJAX 发布数据后如何呈现视图？答案

【问题标题】：How do I render a view after POSTing data via AJAX?通过 AJAX 发布数据后如何呈现视图？
【发布时间】：2012-07-20 14:03:50
【问题描述】：

我已经构建了一个可以运行的应用程序，并使用表单提交数据。提交后，视图会重定向回来以显示更改。凉爽的。 Django 101。现在，我不使用表单，而是使用 Ajax 通过 POST 调用提交数据。这样就成功地将数据保存到数据库中。

现在，困难的部分（或者可能不是，只是很难找到）是是否可以告诉 Django 将已提交的新项目（通过 Ajax）添加到当前页面，而无需刷新页面。目前，我的应用程序保存数据，刷新后该项目显示在页面上，但这显然不是必需的结果。

如果可能的话，我想使用与我目前使用的完全相同的视图和模板 - 基本上我想知道是否有办法将正常的 HTTP 请求（导致页面刷新）替换为Ajax 调用，并获得相同的结果（使用 jQuery）。我今天大部分时间都在解决这个问题，所以在我拔掉我所有的头发之前，任何帮助都将不胜感激。

【问题讨论】：

您可以将正文替换为$('body').load(...)。但是，我认为您应该返回 JSON 响应并更新真正发生变化的内容。如果必须刷新整个页面，为什么还需要 AJAX？
这是我遇到的问题之一 - 我的 POST 调用返回的数据不是 json，并且添加 json 作为文件类型导致没有返回任何内容..

标签： ajax django

【解决方案1】：

我有一个非常相似的问题，这就是我的工作方式......

在views.py

from django.utils import simplejson
...
ctx = {some data to be returned to the page}
if ajax == True:
    return HttpResponse(simplejson.dumps(ctx), mimetype='json')

然后在javascript中

jQuery.ajax({
    target: '#id_to_be_updated',
    type: "POST",
    url: "/",
    dataType: 'json',
    contentType: "text/javascript; charset=\"utf-8\"",
    data: {
        'foo':foo,
        'bar':bar,
    },

    success: function(data){
        $("#id_to_be_updated").append(data.foo);
    }
});

【讨论】：

【解决方案2】：

我是这样做的：

有表单的页面包含这样的表单

contact.html

{% include "contact_form.html" %}

这样可以重复使用。

接下来我设置我的视图代码（此视图代码假定联系表单需要保存到数据库，因此是 CreateView）：

class ContactView(CreateView):
    http_method_names = ['post']
    template_name = "contact_form.html"
    form_class = ContactForm 
    success_url = "contact_form_succes.html"

这里有几点需要注意，此视图仅接受 pots 方法，因为表单将通过 contact.html 页面接收。对于这个视图，我设置了另一个模板，它是我们在contact.html 中包含的，即裸表单。

contact_form.html

<form method="POST" action="/contact">{% crsf_token %}
    {{ form.as_p }}
</form>

现在将javascript添加到contact.html页面：

$("body").on("submit", 'form', function(event) {
    event.preventDefault();
    $("#contact").load($(this).attr("action"),
    $(this).serializeArray(),
    function(responseText, responseStatus) {
            // response callback
    });
 });

这会将表单发布到 ContactView 并替换 #contact 之间的任何内容，这是我们的表单。您不能使用 jquery 的 .load 函数来实现一些更花哨的 html 替换。

此代码基于现有的工作项目，但稍作修改以更容易解释发生的情况。

【讨论】：