我想推遲一個表單操作，但仍然提交之前，我重定向

Question

我有一個標準的形式與一些文本輸入和提交按鈕在底部。它的動作目前重定向到我的主頁，但我希望它提交表單，然後稍後重新定向一兩秒鐘。

我在Delay page redirect after form submit using jquery/js?處發現了一個類似的問題，但是那裏的答案只是延遲了一段時間，然後提交併同時重定向。

如果它的任何幫助，這是我的形式的迷你版

<form action="/home" onsubmit="createAdd({{ newID }}, {{ user.get_profile.id }})" class="form-horizontal" method="post">{% csrf_token %} 
<div class="control-group"> 
    <label class="control-label" for="newName">Name*</label> 
    <div class="controls"> 
     <input type="text" name="newName" id="name" required> 
    </div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
     <button type="submit" class="btn btn-primary" value="Create"><i class="icon-wrench icon-white"> </i> Create </button> 
    </div> 
    </div> 
</form> 

我的AJAX：

function createAdd(event, user){ 

    $.ajax({ 
    url: '/eventsearch/eventsearch/createCustom/', 
    type: "POST", 
    data: {name: name, loc: loc, start: start, end: end, tags: tags, event_id: event, profile: user}, 
    success: function(){ 
     window.setTimeout(function() { 
      window.location.href = '/eventsearch/eventsearch/'; 
     }, 2000); 
    } 
    }); 
} 

Answer 1

如果您通過AJAX提交，那麼您需要在AJAX調用的成功回調中設置重定向（及其延遲）。像這樣的：

$.ajax({ 
    // other AJAX options 
    success: function() { 
     window.setTimeout(function() { 
      window.location.href = someUrl; 
     }, 2000); 
    } 
}); 

這應該等待AJAX​​成功後2秒，然後將用戶重定向到新頁面。

Answer 2

我想你想要做的是通過AJAX提交表單（使用類似jquery表單插件http://malsup.com/jquery/form/），然後從成功回調中進行重定向。

Answer 3

當您在瀏覽器url欄中輸入網址時，您正在向該URL提交「GET」請求。

當您提交表單時，您正在發送「POST」請求。

這兩個請求都會發送一些（或沒有）數據並收到「響應」。在你目前的情況下，我認爲如果你的頁面是在瀏覽器中呈現的（在完成一些處理之後），那麼對這兩者的響應只是標準的HTML輸出。

所以GET流程是這樣的：在地址欄

按

1. 類型地址「走出去」
2. GET請求被髮送到你的服務器
3. 您的服務器與HTML來回應渲染

而且POST是這樣的：

1. 填寫表格
2. 按「提交」按鈕
3. POST請求被髮送到你的服務器
4. 你拿起POST變量並對其進行處理（也許保存到數據庫或類似）
5. 您的服務器迴應HTML呈現

正如您所看到的，SUBMIT是REDIRECT在這些情況下的一部分。

您需要做的是分支處理POST表單，然後重定向到您要顯示的頁面。

爲此，您需要創建另一個PHP腳本，它將處理POST請求，執行處理並返回成功消息。然後，您需要將用戶重定向到您希望重定向到的相關頁面。

這將是新的流程：

1. 填寫表格
2. 按 「提交」 按鈕
3. 的JavaScript創建了一個AJAX POST調用處理網址：
   1. 處理腳本得到所有POST變量，並做它需要的（保存到數據庫或其他）
   2. 處理腳本返回HTTP/1.1 200 OK響應。
4. 成功的JavaScript，然後啓動一個計時器，幾秒鐘後將用戶重定向到成功頁面。

我希望這是有道理的。如果您需要更多信息，請告訴我。

Answer 4

如果您嘗試在重定向之前等待ajax提交，您可以在成功時執行重定向。

function createAdd(event, user){ 

    $.ajax({ 
    url: '/eventsearch/eventsearch/createCustom/', 
    type: "POST", 
    data: {name: name, loc: loc, start: start, end: end, tags: tags, event_id: event, profile: user}, 
    success: function(){ 
     window.location = '/redirect/goes/here' 
    } 
}); 

Answer 5

使用則需要等到done調用回調函數，因爲這意味着你POST要求是全成阿賈克斯，然後你可以將用戶重定向。就像這樣：

function createAdd(event, user){ 
    $.ajax({ 
    url: '/eventsearch/eventsearch/createCustom/', 
    type: "POST", 
    data: {name: name, loc: loc, start: start, end: end, tags: tags, event_id: event, profile: user} 
    }) 
    .done(function(result) { 
    // redirect as you like 
    window.location.href = 'http://stackoverflow.com' 
    }) 
    .fail(function(jqXHR, textStatus) { 
    // your request failed so do not redirect and handle the error 
    }); 
} 

希望它有幫助。