提交表單而不刷新/重定向當前頁面（Python（Django）+ jQuery + Ajax）

任何使用jQuery Ajax使用Python提交表單而不刷新當前頁面的方式？我希望最終結果與Facebook評論的工作方式類似。提交表單而不刷新/重定向當前頁面（Python（Django）+ jQuery + Ajax）

我目前使用jQuery Form來做Ajax。但是，它不給我我想要的用戶體驗，因爲：

使用jQuery表格，地址欄上的網址刷新到我提交表單提交後。
它確實刷新了頁面。我特別不喜歡它，比方說，我在頁面底部滾動到最大值。提交表單後，刷新頁面，焦點被重定向到頁面頂部。

我希望我已經明確了我的要求。我需要類似Facebook評論系統的作品。有人發表評論，然後提交評論時根本沒有刷新頁面。

編輯

jQuery代碼：

$('#review_submit').submit(function() { 
     var options = {};   
     $(this).ajaxSubmit(options); 
     return false; 
}); 



    $('[name=submit_review_btn]').click(function(){      
     $('#review_submit').submit(); 
    });

所以，Python代碼來處理提交將需要一個頁面從服務器端代碼重新定向，所以重定向頁面到這個URL， 'main_URL.com'

隨着jQuery的代碼中所示，結果是：

該URL出現在地址欄中：main_URL.com/ form_action_url < ---這是我設置用於提交表單的表單操作。
頁面重定向到我在服務器端設置的頁面。

我很困惑這個Ajax的經驗。

來源

2011-10-30 MrCooL

這就是ajax應該做的事情，具體取決於你設置的方式。這聽起來像你沒有禁用表單提交，所以當你點擊提交按鈕時頁面被刷新。 –

嗨，我編輯了我的問題 – MrCooL

如果您使用AJAX提交表單，爲什麼要讓服務器在某處重定向？我必須說，我不完全明白你在做什麼。即使你想這樣做，你也不能簡單地從服務器返回一個HttpResponseRedirect。我現在可以看到JS代碼（我認爲你已經在加載文檔後將jQuery Form初始化了）並且看起來是正確的。不過，它不應該在任何地方重定向。 –

你可以通過使用jquery的ajaxPost而不是使用jquery的表單來處理這個問題。這將允許您以.serialize()的形式（獲取參數）並且能夠返回JS函數以在'表單提交'後執行您想要的操作。退房jQuery.post()

jsFiddle

爲發生後通過AJAX調用這不會刷新頁面。它允許你在帖子發佈之後運行一個函數，並且做你想要的（如果帖子返回數據，它將在這裏可用......如果你想在這個成功之後做另一個GET或POST，它可以在這裏完成...等等等等）

來源

2011-11-01 11:27:49 g19fanatic

非常感謝！這正是我想要的。到目前爲止，我只用Google Chrome測試了這一點。 – MrCooL

如果您發佈了您的JavaScript代碼，回答起來會更容易。

您是否使用提交按鈕提交表單？如果是這樣，那麼jQuery Form應該處理所有事情，而不是刷新頁面。

如果您要提交在JavaScript的形式，你的代碼應該看起來像jQuery的形式實例：

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

的return false;在這裏非常重要。否則，用戶將被重定向。

對你係統的正常工作，你需要做的兩相：

提交評論
追加到其他評論中所註釋（或獲取來自服務器的新意見，然後追加）

這就是你目前的設置的樣子嗎？

來源

2011-10-30 16:10:21

嗨，我編輯了我的問題 – MrCooL

我有一個非常動態的網站，使用這種技術到處都是。我們使用Dojo，但原理是一樣的。就像上面的海報所說，你的表單需要有onsubmit =「return false;」作爲屬性（或者在它提交的表單對象中），以便頁面不被重新加載。

在服務器端，我們不使用重定向，而是使用JSON（或XML或其他）回覆並告訴響應處理程序（jQuery，Dojo等）接下來要做什麼。

大部分的時間，其過程是：

後與xhrPOST呼叫
做服務器上的工作
返回JSON/XML /文本
手柄的形式返回值並有javascript決定怎麼做

一個具體的例子是這樣的：

用戶提交病人的生命體徵
Server驗證，並返回{成功：「生命體徵收到。」}或{錯誤：「無效號碼」}
的JavaScript XHR回調處理決定下一步該怎麼做（關閉對話框，刷新形式的新條目或提醒注意缺少的字段）

編輯：鏈接到一些Python web框架：link

鏈接到一個基本的教程Ø n的Django的返回JSON（使用jQuery）link

另外一個提示：當您使用JSON，它是技術上不再AJAX，作爲X代表XML。

來源

2011-11-04 02:17:39

Hi @Nick，你知道如何使用Python從服務器端返回JSON/XML /文本？您可以展示的任何快速示例？提前致謝！ – MrCooL

好吧，我們正在使用Django，所以不同的python（或ruby，w/e）框架看起來會不同，但在Django中它會是這樣的： 'def myview（response）： ...做一些工作 answer =「{success：'Vitals received'}」 return HttpResponse（answer） ' 這是使用Django返回JSON的最基本的方法，原理是一樣的，您只需返回'{}'中的內容到您的迴應流。在真實環境中，您可能會使用Python附帶的json模塊（或者您正在使用的任何語言）。 –

提交表單而不刷新/重定向當前頁面（Python（Django）+ jQuery + Ajax）

回答

相關問題