jquery等待直到AJAX调用完成

问题描述：

我有一个ajax函数来保存表单数据。我希望它保持异步，因为用户可以随时点击保存。但是，我有另一个功能将表单转换为PDF，我希望它在创建PDF之前运行保存功能（以防用户添加更多数据）。打开pdf之前有没有办法让$('input.submit')等待保存完成？下面是我使用jQuery：jquery等待直到AJAX调用完成

$("button#save").on('click', function(){ 
       $.ajax({ 
        type: 'POST', 
        url: '<?php echo matry::base_to('utilities/crm/field_day_save');?>', 
        data: $("form#trip_form").serialize(), 
        dataType: 'json', 
        success: function (data) 
        { 
         $("#alerts").html(data.alert); 
         $("#form_id").val(data.id); 
        } 
        }); 
      }); 
     $("input.submit").on('click', function(event){ 
      event.preventDefault(); 
      $("button#save").trigger('click'); 
      window.open('<?php echo matry::base_to('custom_worddocs/field_day');?>' + '&fd_id=' + $("#form_id").val()); 
     });

总之，我想$('button#save').click()保持同步，但是我想$(input.submit)等待按钮保存打开新窗口之前完成。

你打开在'success'或'Ajax请求的complete'回调的PDF文件。 – Danny 2013-02-15 18:53:19

为什么你再次触发点击？ – 2013-02-15 18:58:42

点击是运行ajax保存功能，所以它在创建PDF之前保存。 @Danny，我不想重写保存功能，只需额外打开一个窗口行，并且我不希望每次保存的 – Mike 2013-02-15 19:05:00

答

有你的点击处理程序返回一个承诺的对象，然后使用triggerHandler()触发点击事件，并得到这是回报价值。

$("button#save").on('click', function(){ 
    return $.ajax({ 
     ...

和

... 
$("button#save").triggerHandler('click').done(function(){ 
    window.open(...); 
}); 
...

概念证明：http://jsfiddle.net/SRzcy/

就像一个魅力一样打开窗口。谢谢。 – Mike 2013-02-15 19:03:28

答

jQuery的ajax函数返回一个jqXHR对象，其中的行为如同deferred。

通过仅从then函数内调用window.open，它会等待AJAX来完成：

$("button#save").on('click', function() { 

    var jqXHR = $.ajax({ /* your config... */ }); 

    $("input.submit").one('click', function(event) { 
     event.preventDefault(); 
     $("button#save").trigger('click'); 

     jqXHR.then(function() { 
      window.open('<?php echo matry::base_to('custom_worddocs/field_day');?>' + '&fd_id=' + $("#form_id").val()); 
     }); 
    }); 

}

jquery等待直到AJAX调用完成

相关推荐