在我的应用程序中，我有一个导入数据功能。目前，当有人上传CSV文件并提交页面时，他们会看到指示文件正在上传的旋转器。大约一分钟后，一旦导入完成，页面将刷新。
我想通过添加导入的进度条使页面更友好一些。我的import类循环遍历CSV中的每一行以导入数据，因此我添加了一些代码，以便在每几个循环之后，它将百分比写入一个文件，以便我可以使用AJAX请求读取该文件并显示百分比。
我想要读取文件，但是我在提交表单后发送的任何AJAX请求都不会返回给我。服务器似乎知道页面将被刷新，所以它甚至不需要费心。查看Chrome开发人员工具中的网络选项卡中的请求，显示(未决)的状态，并且它们都没有改变。
是否有一些方法，我可以保持AJAX请求后，我提交了一个表单?另外，应用程序需要支持IE9+，所以使用File API通过AJAX提交文件是不可行的。
如果使用会话，则会发生以下情况:第一个请求阻塞临时会话文件以供读取。后续请求必须等待锁被释放，然后服务器才能开始执行它们。
这也意味着您不能使用会话来显示进度。
还要记住，等待时间的一个重要部分是由于文件的上传。根据你的治疗，上传时间可能比治疗时间重要得多。因此，您的进度条将不会给出您期望的结果。
假设您的页面名为importdata.php，并且您正在该页面的脚本中执行以下操作以开始监控进度:
importForm.onsubmit = monitorProgress;
您可以做的是将整个页面托管在iframe中。创建一个新页面来承载iframe。如果您希望保持URL不变，请将原始页面重命名为importdata_form.php，并将新页面命名为importdata.php。在新页面中，包含一个脚本块和一个填充页面的iframe。将<title>从原始页面移动到新页面。设置iframe的src为importdata_form.php。将monitorProgress函数移动到新页面的脚本块中。然后更改原始页面中的onsubmit处理程序，以引用父窗口中的函数(参见window.parent):
importForm.onsubmit = parent.monitorProgress;
您的新页面可能看起来像这样:
<!doctype html>
<html>
<head>
<title><!-- move title from original page to here --></title>
<style>
iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 0 none;
}
</style>
<script>
function monitorProgress() {
// your ajax calls here
}
</script>
</head>
<body>
<iframe src="importdata_form.php"></iframe>
</body>
</html>