只有在提交時重新載入此表格或div

Question

我的代碼正常工作。它提交數據而不重新加載。

但我想重新加載只有這種形式或這個div像往常一樣提交。

總之，我想提交這個表單就像它發生type =「submit」一樣。我不想阻止與js的負載，但只加載此表單而不是其他div或整個頁面。

我應該在這裏寫什麼？

.done(function(data){ 
//reload div or form only   
}) 

<div id="reply-box"> 
 

 
<div class="form-group"> 
 

 
<form action="" method="post" id="reply" enctype="multipart/form-data" style="width: 85%;" > 
 
<div class="input-group"> 
 

 

 
<input type="file" name="image2" class="file" id="imgInp"/> 
 

 
<span class="input-group-btn"> 
 
     <button class="browse btn btn-primary input-md" type="button" ><i class="glyphicon glyphicon-picture"></i>I</button> 
 
     </span> 
 
<input type="text" placeholder="say something" class="form-control" id="comment" name="comment" required/><br/> 
 

 
<span class="input-group-btn"> 
 
<button class="btn btn-info" type="submit" >submit</button> 
 
</span> 
 
    
 
</div> 
 
<div> 
 
<img id="blah" src="/final/images/blank.jpg" style=" width:7%; float:left; " /> 
 
</div> 
 
</form> 
 

 
</div> 
 
    
 

 

 
    <script type="text/javascript"> 
 
$(document).ready(function() { \t 
 
\t 
 
\t // submit form using $.ajax() method 
 
\t 
 
\t $('#reply').submit(function(e){ 
 
\t \t 
 
\t \t e.preventDefault(); // Prevent Default Submission 
 
\t \t 
 
\t \t $.ajax({ 
 
\t \t \t url: 'reply.php?slug=<?=$page_id?>', 
 
\t \t \t type: 'POST', 
 
\t \t \t 
 
\t \t data: new FormData(this), 
 
\t \t \t contentType: false, 
 
    \t  cache: false, 
 
\t \t \t processData:false, 
 
\t \t 
 
\t \t }) 
 
\t \t .done(function(data){ 
 
\t \t 
 
     // here i want to refresh only the form or the div like normally happens on submit 
 
\t \t 
 
\t \t \t 
 
\t \t }) 
 
\t \t .fail(function(){ 
 
\t \t \t alert('Ajax Submit Failed ...'); \t 
 
\t \t }); 
 
\t }); 
 
\t 
 
}); 
 
</script>

Answer 1

你試過IFRAME？ 爲表單創建一個單獨的頁面並使用iframe將其加載到主頁上。在http://www.w3schools.com/tags/tag_iframe.asp

Answer 2

的更換部分

更多信息很簡單：

$('#reply').html(data); 

假設服務器返回相同的HTML標記。

但是，可能會有另一個問題，事件綁定 - 綁定到正在被替換的元素的所有事件都將消失。所以，你有兩個選擇：

提取東西放到功能

這是相當自我解釋：一切都提取到一個單獨的功能，所以你可以遞歸調用它。所以移動這一部分：

$('#reply').submit(function(e){ 
    e.preventDefault(); // 
    // [...] 
}); 

在獨立的模塊：

function bindMyAwesomeSubmit() { 
    $('#reply').off('submit.mynamespace').on('submit.mynamespace', function(e){ 
     e.preventDefault(); // 
     // [...] 
     $.ajax() 
     .done(function(data){ 
      $('#reply').html(data); 
      bindMyAwesomeSubmit(); 
     }); 
    }); 
} 
$(document).ready(bindMyAwesomeSubmit); 

（我們也照顧解除綁定事件以防止內存泄漏）。

使用事件代表團

另一種選擇是使用event delegation，這意味着你實際上的事件綁定到一個更高的元素，而不是形式。

這基本上意味着，代替$('form').submit()你會用不同的方式：

$('body').on('submit', 'my-form', callback) 

（body作爲一個例子，只是使用未chaniging最接近父