如何在通過AJAX發佈數據後呈現視圖？

我已經構建了一個可以工作的應用程序，並使用表單來提交數據。一旦提交，視圖就會重定向回來顯示更改。涼。 Django 101.現在，我使用Ajax通過POST調用提交數據，而不是使用表單。這成功地將數據保存到數據庫。如何在通過AJAX發佈數據後呈現視圖？

現在，困難（或者可能不是，很難找到）的一部分是，是否可以告訴Django將已經提交的新項目（通過Ajax）添加到當前頁面，而不刷新頁面。目前，我的應用程序保存了數據，刷新後該項目顯示在頁面上，但這顯然不是必需的結果。

如果可能的話，我想使用完全相同的視圖和我現在使用的模板 - 基本上我想知道是否有一種方法可以替換正常的HTTP請求（這會導致頁面刷新）用Ajax調用，並獲得相同的結果（使用jQuery）。今天的大部分時間我都在這個黑客攻擊，所以任何幫助將不勝感激，在我把所有的頭髮拉出來之前。

來源

2012-07-20 Northernlights

你可以用'$（'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); 
    } 
});

來源

2012-07-20 15:01:56 JoshuaBox

離開工作..我會嘗試儘快:) – 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替換。

此代碼基於一個現有的工作項目，但稍作修改以便解釋更容易發生的事情。

來源

2012-07-20 16:10:07

如何在通過AJAX發佈數據後呈現視圖？

回答

相關問題