我的代码运行正常。它在不重新加载的情况下提交数据。
但我想在提交时像往常一样重新加载此表单或此div。
简而言之,我想提交此表单,就像它类型="提交"一样。我不想再用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>
&#13;
答案 0 :(得分:1)
你试过iframe吗? 为表单创建一个单独的页面,并使用iframe将其加载到主页面上。
的更多信息答案 1 :(得分:0)
替换部分很简单:
$('#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
用作示例,只使用最近的非父级的父级。