javascript - 仅在提交时重新加载此表单或 div

标签 javascript jquery ajax forms

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

但我只想像往常一样在提交时重新加载此表单或此 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>

最佳答案

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

更多信息请访问 http://www.w3schools.com/tags/tag_iframe.asp

关于javascript - 仅在提交时重新加载此表单或 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41786351/

相关文章:

jquery - encodeURI 函数不对括号 “( )” 进行编码

javascript - 尝试在 jquery .load 'onLoad' 上触发 body ("myHTML.html"事件)

javascript - 我可以在没有浏览器的情况下使用 AJAX 和 JavaScript 吗?

javascript - Promise 返回空值

javascript - jQuery 更新 html 元素文本而不影响 HTML 子元素

jquery - 在 chrome bootstrap 中添加网站名称

javascript - 如何在不包含额外内容的情况下获取返回数据的值

javascript - 数据库查询后启用/禁用按钮

javascript - 在node.js下运行UglifyJS产生找不到模块错误

javascript - 日期选择 onChange 等效/修复?