奇怪的缓存问题Chrome

所以我对Chrome如何缓存信息感到非常困惑，我的问题是我无法加载到传单地图中。当我在IIS本地运行此代码时，Chrome会缓存旧网站数据，不再更新。然后我使用ngrok，清除缓存，我就没有更多的地图了。

目前，我的地图甚至不再在本地加载，我相信这很容易，我错过了一些东西，请有人向我解释一下，或者给我指一个资源来帮助我。谢谢你的帮助！

Javascript：

// Create map and get user location
$(document).ready(() => {
createMap()
});
// Map function
const createMap = async () => {
"use strict"
let map = L.map('mapid').setView([51.505, -0.09], 13);
const tileOptions = {
maxZoom: 5,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
let OpenStreetMap_Mapnik = await L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tileOptions).addTo(map);
}
// Update countries list
const getCountry = $.ajax("libs/php/getCountry.php")
getCountry
.done(result => {
if (result.status.name == "ok") {
result["data"].forEach(el => {
$('#countryList').append(new Option(el["name"], el["iso_a2"]));
});
}
})
.catch(err => {
console.log(err)
})
// DOM update
$("#search").click(() => {
console.log($("#countryList").find(":selected").text());
// // GET COUNTRY BORDERS
$.ajax({
url: "libs/php/getCountryBorders.php",
type: 'POST',
dataType: 'json',
data: {
country: $('select').val(),
},
success: function(result) {
// ADD COUNTRY BOUDS
console.log(result["data"]);
},
error: function(err) {console.log(err)}
})
})

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="source/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="source/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="source/favicon-16x16.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

<link rel="stylesheet" href="/libs/styles/style.css">
<title>Gazetter</title>
</head>
<body>
<div id="mapid"></div>
<!-- <div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<select name="countryList" id="countryList" class="form-control">
<option value="">Select Country</option>
</select>
<button type="button" name="search" id="search" class="btn btn-info">Search</button>
</div>
<div class="col-xs-8">
<div id="mapid"></div>
</div>
</div>
</div> -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="/libs/javascript/script.js"></script>
</body>
</html>

在所有URL的末尾添加一个随机字符串或数字，这些URL将加载一些不刷新的数据。

类似这样的东西：

const getCountry = $.ajax("libs/php/getCountry.php?rand=" + Math.random())

您已经禁用了ID为countryList和search的html，然后js可能会在$('#countryList').append(new Option(el["name"], el["iso_a2"]));、console.log($("#countryList").find(":selected").text());和country: $('select').val()行中抛出错误。

我建议只测试干净的地图而不加载数据。

此外，我从未见过await L.tileLayer('，我不知道这是否正确，但在没有await的情况下进行测试

相关内容

最新更新

热门标签：