Jquery 如何重新构造代码以使Bootstrap'；使用回调的异步模式方法？

我正在为我的网站使用Bootstrap v3.3.0。我正在使用引导框架的模态对话框功能

我为表单提交编写了一个jQuery AJAX函数，如下所示：

$('#rebate_request_form').submit(function(e) {  
  $('#rebateModal').modal('hide');
  $('#progressModal').modal('show');   

  var fileInput = $("#receipt_image")[0];  
  var input =  $("#receipt_image").val(); 

  var form = $(this);

  var formdata = false;

  if(window.FormData) {
    formdata = new FormData(form[0]);
  }  

  if(input != '') {
    var ImgSizeInBytes = fileInput.files[0].size;  
    var filename = $('input[type=file]').val().split('\\').pop();
    var customer_id = $('#customer_id').val();
  }  
  if(input!='' && ImgSizeInBytes > 10485760) {
    var trans_id = $('#trans_id').val();  
    var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val();
    var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val();
    var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val();  

    var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id;
    var method = 'GET';
  } else {
    var params = formdata ? formdata : form.serialize();
    var method = 'POST';
  }  

  var formAction = form.attr('action');

  $.ajax({
    url         : 'rebate_request.php',
    type        : method,    
    cache       : false,
    data        : params,
    contentType : false,
    processData : false,

    success: function(response) {
      $('#progressModal').modal('hide');
      var responseObject = $.parseJSON(response);    
      if(responseObject.error_message) {
        $('#rebateModal').modal('show');  
        if ($(".alert-dismissible")[0]) {
          $('.alert-dismissible').remove();   
        }  
        var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
        $(htmlString).insertBefore('div.modal-body #rebate_request_form');        
        } else { 
          $('#successModal').modal('show');       
        }
      }
    });
    e.preventDefault();
  });

$('#rebateModal').one('hidden.bs.modal', function () {
  $('#progressModal').one('shown.bs.modal', function () {
  //...more code...
  }).modal('show');
}).modal('hide');

但我不能以上述方式编写代码，因为我是Bootstrap框架和JS的新手

那么，有人能帮我重新构造我用Bootstrap函数回调编写的代码吗

如果您需要有关引导中函数回调的其他信息，请参阅以下链接：

---

提前感谢。

我想，既然您想要使用回调函数，您可能会怀疑submit函数中的调用之间可能存在竞争条件（可能是由于在动画中花费的时间）：

以及AJAX成功函数中的调用（当响应包含错误消息时）：

在这种情况下，一种可能的实施方式是：

$( '#rebate_request_form' ).submit( function(e) {
    $( '#rebateModal' ).one( 'hidden.bs.modal', function () {
        $('#progressModal').one( 'shown.bs.modal', function () {
            var fileInput = $("#receipt_image")[0];  
            var input =  $("#receipt_image").val(); 

            var form = $( '#rebate_request_form' );

            var formdata = false;

            if( window.FormData ) {
                formdata = new FormData( form[0] );
            }  

            if(input != '') {
                var ImgSizeInBytes = fileInput.files[0].size;  
                var filename = $('input[type=file]').val().split('\\').pop();
                var customer_id = $('#customer_id').val();
            }  
            if(input!='' && ImgSizeInBytes > 10485760) {
                var trans_id = $('#trans_id').val();  
                var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val();
                var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val();
                var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val();  

                var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id;
                var method = 'GET';
            } else {
                var params = formdata ? formdata : form.serialize();
                var method = 'POST';
            }  

            var formAction = form.attr('action');

            $.ajax( {
                url         : 'rebate_request.php',
                type        : method,    
                cache       : false,
                data        : params,
                contentType : false,
                processData : false,

                success: function(response) {
                    $('#progressModal').one( 'hidden.bs.modal', function () {
                        var responseObject = $.parseJSON(response);    
                        if(responseObject.error_message) {
                            $('#rebateModal').modal('show');  
                            if ($(".alert-dismissible")[0]) {
                                $('.alert-dismissible').remove();   
                            }  
                            var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
                            $(htmlString).insertBefore('div.modal-body #rebate_request_form');        
                        } else { 
                            $('#successModal').modal('show');       
                        }
                    } ).modal('hide');
                }
            });
        } ).modal( 'show' );
    } ).modal( 'hide' );
    e.preventDefault();
} );

$（“#返利申请表”）。提交（功能（e）{
$（'#rebateModal'）.one（'hidden.bs.modal'，function（）{
$（'#progressModal'）.one（'show.bs.modal'，function（）{
var fileInput=$（“#收据_图像”）[0]；
var输入=$（“#收据_图像”）.val（）；
风险值形式=$（“#回扣"请求"形式”）；
var formdata=false；
if（window.FormData）{
formdata=新的formdata（表格[0]）；
}  
如果（输入！=''）{
var ImgSizeInBytes=fileInput.files[0]。大小；
var filename=$（'input[type=file]'）.val（）.split（'\\'）.pop（）；
var customer_id=$（'#customer_id'）.val（）；
}  
如果（输入！=''&&ImgSizeInBytes>10485760）{
var trans_id=$（'#trans_id'）.val（）；
var trans#u datelist_year_list=$（“#trans#u datelist_year_list”）.val（）；
var trans#u datelist_month_list=$（“#trans#u datelist_month_list”）.val（）；
var trans#u date_dateLists_day_list=$（“#trans#u date_dateLists_day_list”）.val（）；
var params=“trans_id=“+trans_id+”&trans_日期列表\日期列表\日期列表+”&trans_日期列表\日期列表\月列表=“+trans_日期列表\月列表+”&trans_日期列表\年列表=“+trans_日期列表\年列表+”&文件大小=“+imgsizinbytes+”&文件名=“+filename+”&客户id=”；
var方法='GET'；
}否则{
var params=formdata？formdata:form.serialize（）；
var方法='POST'；
}  
var formAction=form.attr（‘action’）；
$.ajax（{
url:'retain_request.php'，
类型：方法，
cache:false，
数据：params，
contentType:false，
processData:false，
成功：功能（响应）{
$（'#progressModal'）.one（'hidden.bs.modal'，function（）{
var responseObject=$.parseJSON（响应）；
if（响应对象错误消息）{
$（'rebateModal'）.modal（'show'）；
如果（$（“.alert dismissible”）[0]）{
$（'.alert dismissible'）.remove（）；
}  
var htmlString=“×；”+responseObject.error_message+”；
$（htmlString）.insertBefore（'div.modal-body#retain#u request_form'）；
}否则{
$（'successModal'）.modal（'show'）；
}
}）。模态（“隐藏”）；
}
});
}）。模态（‘show’）；
}）。模态（‘隐藏’）；
e、 预防默认值（）；
} );

通过仅在隐藏回调完成后（隐藏动画完成后应发生）继续进行AJAX调用，可以消除可能的竞争条件，即AJAX调用返回的错误比模式隐藏动画快

---

这只是一个粗略的实现。您可能还希望将内部代码提取到一个单独的函数中，您可以通过名称调用该函数。这将允许您包装一些初始逻辑来处理各种场景（例如，如果在调用表单提交函数时#Rebatemodel不可见）

只是一个提示：输入错误的

one

而不是

on

？请做一个小动作并提供html以帮助更好地评估

响应对象的值。错误消息

？@Zudwa，.one（）方法与.on（）相同，只是处理程序在第一次调用后被解除绑定。刚才注意到progressModal存在类似的争用条件。。我将很快编辑我的答案。

$('#rebateModal').modal('show');

$( '#rebate_request_form' ).submit( function(e) {
    $( '#rebateModal' ).one( 'hidden.bs.modal', function () {
        $('#progressModal').one( 'shown.bs.modal', function () {
            var fileInput = $("#receipt_image")[0];  
            var input =  $("#receipt_image").val(); 

            var form = $( '#rebate_request_form' );

            var formdata = false;

            if( window.FormData ) {
                formdata = new FormData( form[0] );
            }  

            if(input != '') {
                var ImgSizeInBytes = fileInput.files[0].size;  
                var filename = $('input[type=file]').val().split('\\').pop();
                var customer_id = $('#customer_id').val();
            }  
            if(input!='' && ImgSizeInBytes > 10485760) {
                var trans_id = $('#trans_id').val();  
                var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val();
                var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val();
                var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val();  

                var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id;
                var method = 'GET';
            } else {
                var params = formdata ? formdata : form.serialize();
                var method = 'POST';
            }  

            var formAction = form.attr('action');

            $.ajax( {
                url         : 'rebate_request.php',
                type        : method,    
                cache       : false,
                data        : params,
                contentType : false,
                processData : false,

                success: function(response) {
                    $('#progressModal').one( 'hidden.bs.modal', function () {
                        var responseObject = $.parseJSON(response);    
                        if(responseObject.error_message) {
                            $('#rebateModal').modal('show');  
                            if ($(".alert-dismissible")[0]) {
                                $('.alert-dismissible').remove();   
                            }  
                            var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
                            $(htmlString).insertBefore('div.modal-body #rebate_request_form');        
                        } else { 
                            $('#successModal').modal('show');       
                        }
                    } ).modal('hide');
                }
            });
        } ).modal( 'show' );
    } ).modal( 'hide' );
    e.preventDefault();
} );