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

问题描述：

我已经构建了一个可以工作的应用程序，并使用表单来提交数据。一旦提交，视图就会重定向回来显示更改。凉。 Django 101.现在，我使用Ajax通过POST调用提交数据，而不是使用表单。这成功地将数据保存到数据库。如何在通过AJAX发布数据后呈现视图？

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

如果可能的话，我想使用完全相同的视图和我现在使用的模板 - 基本上我想知道是否有一种方法可以替换正常的HTTP请求（这会导致页面刷新）用Ajax调用，并获得相同的结果（使用jQuery）。今天的大部分时间我都在这个黑客攻击，所以任何帮助将不胜感激，在我把所有的头发拉出来之前。

你可以用'$（'body'）。load（...）'替换主体。不过，我认为你应该返回一个JSON响应并更新真正改变的内容。如果你不得不刷新整个页面，为什么你需要AJAX？ – 2012-07-20 14:19:25

这是我遇到的问题之一 - 我的POST调用返回的数据不是json，并且将'json'作为filetype导致没有任何东西被返回。 – Northernlights 2012-07-20 14:25:21

答

我有一个非常类似的问题，这是我得到了它的工作...

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

离开工作..我会尝试尽快:) – Northernlights 2012-07-20 15:13:25

答

这里是我是如何做到的：

具有表格的页面包含如此形式

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替换。

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

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

相关推荐