Question

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

$("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)在打开新窗口之前等待按钮保存完成。

Answer 1

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());
        });
    });

}

Answer 2

让您的点击处理程序返回一个promise对象，然后使用triggerHandler()触发click事件并获取它的返回值。

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

和

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

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

Jquery等到AJAX调用完成

2 个答案: