javascript - Jquery 等待 AJAX 调用完成

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

}