Jquery 表单提交和 ajax 调用重叠。 Ajax 调用已取消

Question

我有一个网络应用程序，用户可以在其中创建发票。该应用程序基于 jquery 和 ajax 调用。引入问题的流程：

1. 用户填写发票表格。勾选复选框以创建 PDF。
2. 用户点击“创建发票”按钮
3. 应用程序通过 AJAX 调用将发票数据插入数据库
4. 如果调用成功返回，将使用发票数据创建一个 FORM，它会自动提交，然后从 DOM 中删除。在此步骤中，发票将即时创建，浏览器将开始下载 PDF。
5. 与此同时，最后一次 AJAX 调用 (getDeliveries()...) 会删除发票表单并重新加载起始屏幕。

问题是最后一个 ajax 调用被取消（可以在 Chrome 错误控制台中看到）并且屏幕将是空白的。没有加载结果，这太令人沮丧了。我认为问题在于表单提交和ajax调用重叠。

你知道如何解决这个问题吗？任何其他强制下载文件的解决方案（我可以在哪里等待开始调用 getDeliveries 函数）？

这是我创建的js代码：

        var str = $("#invoiceForm").serialize();

    $('#invoiceForm input[disabled], #invoiceForm select[disabled]').each( function() {
        str = str + '&' + this.id + '=' + $(this).val();
    });
    //Save or update the invoice first
    $.ajax({
        type: "POST",
        url: BASEURL+"productFuncs/setInvoice.php",
        data: "f="+f+"&print=1&"+str,
        success: function(data, textStatus){
            $("#addAjax").hide();
            $("#addButton").show();

            if ( !isNaN( parseInt(data) ) ) {

                //Print out                 
                if ( $("#pdf").is(":checked") ) {
                    //Print out to PDF      
                    var url = BASEURL+"productFuncs/getPrintOut.php";       

                    var inputs = '<input type="hidden" name="f" value="'+ f +'" />' +
                                '<input type="hidden" name="pdf" value="1" />' +
                                '<input type="hidden" name="copy" value="2" />' +
                                '<input type="hidden" name="orig_id" value="'+ data +'" />';

                    $('#invoiceForm input[disabled], #invoiceForm select[disabled]').each( function() {
                        inputs+='<input type="hidden" name="'+ this.id +'" value="'+ $(this).val() +'" />';
                    });                 

                    var pairs = $("#invoiceForm").serializeArray();
                    $.each( pairs, function(i, field) { 
                        inputs+='<input type="hidden" name="'+ field.name +'" value="'+ field.value +'" />'; 
                    });

                    //send request
                    $('<form action="'+ url +'" method="post">'+inputs+'</form>').appendTo('body').submit().remove();

                }
                else {              

                    //Print out to HTML and directly to printer
                    $.ajax({
                        type: "POST",
                        url: BASEURL+"productFuncs/getPrintOut.php",
                        data: "f="+f+"&copy=2&orig_id="+data+"&"+str,
                        dataType: "html",
                        success: function(data, textStatus){
                            $("#printOut").html(data);
                            //Delay because of the IE
                            var t=setTimeout(' $("#printedArea").print() ', 3000);                          
                        }
                    });
                }

                $('#newDeliveryNote, #leftSide, #rightSide').toggle();
                getDeliveries(f, '');                   
            }
            else {
                //Not enough quantity - we have to set the ID nothing to save the delivery again
                $('#invoiceForm input[name=id]').val("");
                alert( data );
            }


        }
    });

getDeliveries 函数中的 AJAX 调用：

        $.ajax({
        type: "GET",
        url: BASEURL+"productFuncs/getDeliveries.php",
        data: "d="+d+"&f="+f,
        success: function(data, textStatus){
            $("#rightSide").html(data);

            $("#cover").hide();     
            $("#ajaxMessage").fadeOut(200);
            jsLink();       
        }
    });

Answer 1

我认为您的表单提交是问题所在。您可以使用 url 创建一个链接以访问创建 pdf 的资源，触发点击并将其删除。

类似：

// of course, you will change href to the url that will be used to generate the pdf
$( "body" ).append( "<a id='downloadLink' href='www.stackoverflow.com' target='_blank'></a>" );
$( "#downloadLink" )[0].click();
$( "#downloadLink" ).remove();

jsFiddle：http://jsfiddle.net/davidbuzatto/QGs5n/

编辑：要使用 POST，我认为 this 会帮助您。我在这里找到它：Download File Using Javascript/jQuery