0

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

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

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

4

2 回答 2

0

我是这样做的：

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

联系人.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 替换。

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

于 2012-07-20T16:10:07.140 回答
0

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

在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);
    }
});
于 2012-07-20T15:01:56.273 回答