jquery - bootstrap的模态ajaxform提交变量和图像

Question

所以，...目前我正在创建一个带有一些输入文本和图像上传字段的表单，我使用 ajaxForm 来处理该过程，并使用 bootstrap 3 作为模式(我将此页面称为表单页面)。在此页面中，我还将显示数据库中的所有数据列表。

场景是，当用户单击按钮时，它将触发 Bootstrap 模式打开(完美工作)其中的表单。当用户单击提交按钮时，表单会将字段的所有值发送到处理页面，该页面工作正常。

所有值都完美发送到处理页面，并在表单页面中很好地返回成功消息，但不会显示新插入的查询。我需要手动刷新页面以显示新添加的查询。我不知道我的代码或 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>

Answer 1

如果您使用 jquery 那么 this might help you.

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});