javascript - 表单提交后，主页卡住，而 pdf 未加载到新页面上

Question

正如标题所说，我遇到了 javascript 和表单提交的问题。

我的问题是，我有一个 html 页面，带有一个表单(完全是模态的，但我认为这里并不重要)。当我提交表单时，我需要做的是

1. 打开一个新页面，该页面必须加载数百页(大约 100 - 300)的 pdf。
2. 验证表单。

问题是，在验证过程中，如果未加载 pdf，则表单所在的页面会卡住或非常非常慢。一旦pdf加载到其他页面上，主页就可以了。您如何解释这一点，我该如何避免这个问题？也许先验证表单然后加载页面？

我不是 javascript 专家，对正在发生的事情的精确解释将是完美的。谢谢。

这是一段没有真正链接的代码

<form id="myForm" action="someURL" method="POST">
 <input type="hidden" value="someValue" name="someName">
<a class="button" id="myButton" href ="URL_OF_THE_PDF" target="_blank" >

JS代码:

$("#mybutton").on('click', function(){
   $.ajax({
    type: "POST",
    url: myURLForm,
    data: form.serialize()
    });
});

我放了一些示例代码，我尝试了不同的方法，但没有一个有效。

Answer 1

您可以在此处使用真正的 HTML 按钮，因为您不需要 href。

<button id="myButton" type="button">

这可行:

按钮的 onClick 函数在新窗口中打开一个空白页面。然后它首先发送ajax请求。

完成后，它会在之前打开的新窗口中加载 pdf 文件。

$("#myButton").on('click', function() {
   let myWindow = window.open(empty.html, '_blank');
    $.ajax({
        type: "POST",
        url: myURLForm,
        data: form.serialize()
    }).done(function() {
          myWindow.localtion = URL_OF_THE_PDF;
    });
});

参见:http://api.jquery.com/jquery.ajax/

您的 100-300 页 pdf 文件有多大？

我认为浏览器正在忙于加载pdf文件，因为100-300页听起来很大。所以你最好先执行ajax请求，然后在ajax请求完成后加载pdf文件。