仅在提交时重新加载此表单或 div答案

【问题标题】：Only reload this form or div on submit仅在提交时重新加载此表单或 div
【发布时间】：2017-01-22 01:16:05
【问题描述】：

我的代码运行良好。它无需重新加载即可提交数据。

但我只想在提交时像往常一样重新加载此表单或此 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() {	
	
	// submit form using $.ajax() method
	
	$('#reply').submit(function(e){
		
		e.preventDefault(); // Prevent Default Submission
		
		$.ajax({
			url: 'reply.php?slug=<?=$page_id?>',
			type: 'POST',
			
		data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
		
		})
		.done(function(data){
		
      // here i want to refresh only the form or the div like normally happens on submit
		
			
		})
		.fail(function(){
			alert('Ajax Submit Failed ...');	
		});
	});
	
});
</script>

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

你试过 iframe 吗？为表单创建一个单独的页面并使用 iframe 将其加载到您的主页上。

【讨论】：

一般iframe不用于表单。

【解决方案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为例，只使用最近的不改变的父级。

【讨论】：