所以,...目前我正在创建一个带有一些输入文本和图像上传字段的表单,我正在使用ajaxForm来处理该过程,并使用bootstrap 3作为模态(这个页面我称之为表单页面)。在此页面中,我还将显示数据库中的所有数据列表。
场景是,当用户点击按钮时,它将触发引导模式打开(完美地工作)表单在其中。当用户单击提交按钮时,表单将把所有字段值发送到处理页面,这是完美的。
所有值都完美地发送到进程页面,它很好地返回表单页面中的成功消息,但它不会显示新插入的查询。我需要手动刷新页面以显示新添加的查询。我不知道我的代码或ajax有什么问题。
对于您的信息,我使用ajaxForm插件来处理表单(http://malsup.com/jquery/form/),Bootstrap和Jquery
这是我目前的代码:
<div id="add_sku" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">*Some text here*</div>
<div class="modal-body">
<form id="addProduct" class="addnew" name="addProduct" method="post" enctype="multipart/form-data" data-ajax="true" action="add_product.php">
.... *the rest of the form field which is input text and image upload*
</div>
</div>
<div class="modal-footer" id="form">
<input name="submit" type="submit" class="btn btn-success" id="addpid" value="submit" />
<input name="Reset" type="reset" class="btn btn-default" value="Cancel" data-dismiss="modal" data-target="div#add_sku" />
</div></form>
</div></div></div>
</div>
和我的js:
<script type="text/javascript">
$(document).ready(function(e) {
$('form#addProduct').submit(function(){
var options={
success:function(r){
$('div#confirm').css('display','').html(r).delay(2500).slideUp('slow');
$('div#add_sku').modal('hide');
},
clearForm:true,
resetForm:true,
type:'post',
}
$(this).ajaxSubmit(options);
return false;
});
e.preventDefault();
});
</script>
答案 0 :(得分:0)
如果你使用的是jquery,那么this might help you.
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
答案 1 :(得分:0)
试试这个:
<script type="text/javascript">
$('#addProduct').submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(res){
$('#confirm').css('display','').html(res).delay(2500).slideUp('slow')
}).fail(function() {
alert( "error" );
});
return false; // preventing default
});
</script>
请记住设置表单操作:“add_product.php”
答案 2 :(得分:0)
最后经过一系列尝试和错误后,我明白了
我的脚本的更新版本&amp;它对我有用
$(function(e) {
$('form#addProduct').submit(function(){
$(this).ajaxSubmit({
url:'add_product.php',
type:'post',
clearForm:'true',
resetForm:'true',
cache:'false',
success:function(msg){
$('div#confirm').slideDown("fast").html(msg).delay(2000).slideUp('slow');
$('div#add_sku').modal('hide');
$('div#showcase').load('show_product.php');
},
complete:function(){
$('form#addProduct').resetForm();
$('form#addProduct').clearForm();
},
error:function(err){
$('div#message').css('display','').html(err);
$('form#addProduct').resetForm();
$('form#addProduct').clearForm();
},
});
return false;
});