jquery表单提交和ajax调用重叠。 Ajax呼叫取消

Question

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

1. 用户填写发票表单。勾选复选框以创建PDF。
2. 用户点击“创建发票”按钮
3. 应用程序与AJAX调用
4. 数据到数据库中。如果调用返回成功一个表格会在发票中创建插入发票数据，它会自动提交并从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); 
      } 


     } 
    }); 

AJAX调用在getDeliveries功能：

 $.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

我认为你的表单提交的问题。您可以创建一个链接与网址访问创建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