我很擅长网络编程特别是javascript和其他前端逻辑。我看到这个奇怪的错误，我的代码在Windows 10上的最新版本的Firefox上工作得非常好，但在Windows 10上不适用于最新版本的chrome。
基本上我有一个由两个多选下拉菜单和两个按钮组成的表单。对于这两个按钮，我在他们的点击监听器中发送ajax POST请求，复选框params到python flask服务器，然后在服务器上创建一个文件，然后在我的POST ajax成功，我发送get请求下载我刚刚创建的文件。在Firefox和Chrome中，我的POST调用正在进行并且文件正在生成正确，但是chrome不会发送请求以下载文件，但是firefox正在发送正确的get请求来获取文件。
另一个奇怪的事情是，chrome确实在获取请求时下载了一个文件，它正在某处发送，但它没有到达我的服务器。我没有看到我的烧瓶服务器日志中的请求来自chrome，但它确实显示为firefox。在这两种情况下都会下载文件，但Chrome会从错误的位置下载错误的文件。
我还尝试在服务器思维上添加延迟，在返回POST请求时仍然生成文件，但这也没有改变chrome行为。
以下是我的代码片段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" type="image/x-icon" href="static/images/main.png">
<title>Link Curation - Curated Results</title>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen"/>
<script>
$(document).ready(function(){
$('#progress').hide();
$('select').material_select();
// Download jsonlines
$("#jlines").click(function(e){
// Required for non-chrome browser
e.preventDefault()
var tags = $('#museums').val();
var codes = $('#codes').val();
var userObj = new Object();
userObj.data = {"tags":tags,"codes":codes,"type":"jlines"};
json_data = JSON.stringify(userObj);
console.log(json_data);
var sv = '{{server}}'.concat("/download");
$.ajax({
method: 'POST',
url: sv,
data: json_data,
contentType: 'application/json',
beforeSend: function(){
$('#progress').show();
document.getElementById("jlines").disabled = true;
console.log("downloading...")
},
success: function(data){
console.log("File Created!");
$('#progress').hide();
document.getElementById("jlines").disabled = false;
window.location.href = "/download?type=jlines";
},
error: function(xhr){
console.log('Request Status: ' + xhr.status + ' \nStatus Text: ' + xhr.statusText + ' \nResponse Text: ' + xhr.responseText);
Materialize.toast("Something went wrong. Please try again!",5000);
$('#progress').hide();
document.getElementById("jlines").disabled = false;
}
});
});
// Download triples
$("#triples").click(function(e){
// Required for non-chrome browser
e.preventDefault()
var tags = $('#museums').val();
var codes = $('#codes').val();
var userObj = new Object();
userObj.data = {"tags":tags,"type":"triples"};
json_data = JSON.stringify(userObj);
console.log(json_data);
var sv = '{{server}}'.concat("/download");
$.ajax({
method: 'POST',
url: sv,
data: json_data,
contentType: 'application/json',
beforeSend: function(){
$('#progress').show();
document.getElementById("triples").disabled = true;
console.log("downloading...")
},
success: function(data){
console.log("File Created!");
$('#progress').hide();
document.getElementById("triples").disabled = false;
window.location.href = "/download?type=triples";
},
error: function(xhr){
console.log('Request Status: ' + xhr.status + ' \nStatus Text: ' + xhr.statusText + ' \nResponse Text: ' + xhr.responseText);
Materialize.toast("Something went wrong. Please try again!",5000);
$('#progress').hide();
document.getElementById("triples").disabled = false;
}
});
});
});
</script>
<style>
#body {
min-height: calc(100vh - 10px);
}
</style>
</head>
<body>
<div>{% include 'header.html' %}</div>
<div id="body">
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<div class="row center">
<br><br>
<h5> Download the curated results (Tip: Select ulan to download all data!) </h5>
<br><br>
<div class="header col s12 m4">
<select multiple id="museums" >
<option value="" disabled selected>Choose museum(s)</option>
{% for tag in keys %}
<option value={{tag}}>{{tag}}</option>
{% endfor %}
</select>
</div>
<div class="header col s12 m4">
<select multiple id="codes">
<option value="" disabled selected>Choose pair status(s)</option>
<option value="3">Match</option>
<option value="4">Unmatch</option>
<option value="5">Not Sure</option>
</select>
</div>
<div class="header col s12 m4">
<form name ="download_data">
<div id="progress" class="preloader-wrapper small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<button id = "jlines" type="submit" class="btn" >Jsonlines</button>
<button id = "triples" type="submit" class="btn" >Triples</button>
</form>
</div>
</div>
</div>
</div>
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5>Curated results from all museums will show up below. You can sort them based on the status or URI or even search based on museum.</h5>
<br><br>
<iframe class="header col s12 light" src="datatable" style="border:0" height="1000" ></iframe>
</div>
</div>
</div>
</div>
<div>{% include 'footer.html' %}</div>
</body>
</html>
感谢您的帮助。
Nilay