Question

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

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

如果可能的话，我想使用我目前正在使用的完全相同的视图和模板 - 基本上我想知道是否有办法替换正常的HTTP请求（导致页面刷新）一个Ajax调用，并获得相同的结果（使用jQuery）。今天的大部分时间里我已经砍掉了这个，所以在我拔掉所有头发之前，任何帮助都会受到赞赏。

Answer 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);
    }
});

Answer 2

我是这样做的：

包含表单的页面包含如此表单

contact.html

{% include "contact_form.html" %}

这种方式可以重复使用。

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

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

这里有几点需要注意，此视图仅接受pot方法，因为表单将通过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。

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

如何通过AJAX POST数据后呈现视图？

2 个答案: