Ajax化的形式不重定向

Question

我在這裏有一個問題:)

在我的項目我有一個表單模板：

{% load bootstrap3 %} 
{% bootstrap_css %} 
{% bootstrap_javascript %} 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function 
     $('#productEditForm').ajaxForm(function() { 
      alert("Product with id {{ id }} saved."); 
     }); 
    }); 
</script> 

<h1>You're editing Product with ID={{ id }}</h1> 
<form enctype="multipart/form-data" method="POST" action="/product_edit/{{ id }}" id="productEditForm"> 
    {% csrf_token %} 
    {{ form.as_p }} 
    <button type="submit">Submit</button> 
</form> 

這筆交易是它正常工作都帶或不帶執行ajaxForm的腳本 - 正在保存對象的實例。但是當表單是「ajaxified」時，重定向不會發生，儘管它應該。我知道JQuery函數preventDefault - 在這種情況下，我猜需要一些相反的東西。

您能否提供一些幫助？

Answer 1

要在ajax請求返回後重定向，您需要使用javascript函數來更改window或document的location屬性。

喜歡的東西：

{% load bootstrap3 %} 
{% bootstrap_css %} 
{% bootstrap_javascript %} 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function 
     $('#productEditForm').ajaxForm(function() { 
      alert("Product with id {{ id }} saved."); 
      window.location.assign("/product_view/{{ id }}"); 
     }); 
    }); 
</script> 

<h1>You're editing Product with ID={{ id }}</h1> 
<form enctype="multipart/form-data" method="POST" action="/product_edit/{{ id }}" id="productEditForm"> 
    {% csrf_token %} 
    {{ form.as_p }} 
    <button type="submit">Submit</button> 
</form> 

這應該重定向到 '/ product_view/{{ID}} /' 上成功接收Ajax響應從表單提交後，服務器返回的。如果您願意，您可以將新頁面作爲ajax響應中的參數傳遞。