getJSON API 适用于本地主机，但不适用于 Web 服务器

我想构建一个显示城市天气的Web应用程序(通过用户输入(。我有三个文件(index.html用于获取用户输入，index2.html用于获取数据并显示它和一个css文件(。问题是，当我通过 chrome 中的文件路径在本地运行网站时，它可以正常工作。但是当我在网络服务器上上传文件时，$.getJSON 函数不会执行。前几次效果很好，但后来我进行了更改，它不再有效。当我什至删除一些代码并仅测试基本功能时，它不起作用。在本地，它可以完美地使用相同的代码。我做了一些调试，注意到除了getJSON API之外，所有内容都被执行了......

下面是索引文件：

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css"> </link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body id="page1">
<center>
<img src="sun.png" alt="Loading Screen" id="Icon" style="width:100px;height:100px;">
<h1>WeatherPro</h1>
<form action="index2.html" method="GET">
<input type="text" id="input" name="keyword" placeholder="City">
<br>
<button type="submit" id="submit">Get Weather</button>
</form>
</center>
</body>
</html>

这是第二个文件：

<!DOCTYPE html>
<html>
<head>
<title>Weatherinfo</title>
<link rel="stylesheet" type="text/css" href="style.css"> </link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
function doPrint(){
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const newName = urlParams.get('keyword');
var link= "http://api.openweathermap.org/data/2.5/weather?q="+newName+"&APPID=myAPI";
$.getJSON(link,function(json){
var temperatur=json.main.temp;
temperatur= temperatur - 273.15;
var roundtemp= Math.round(temperatur*10)/10;
document.getElementById("TempID").innerHTML = roundtemp;

});
}
</script>
</head>
<body id="page2">
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<a href="#">Change Units</a>
<a href="#">Turn tips on/off</a>
</div>
<center>
<h1 id="Mainheader"> Loading</h1>

<img src="Loading.png" alt="Loading Screen" id="Icon" style="width:200px;height:200px;">
<style type="text/css">
dt, dd { display: inline; }
</style>
<p id="TipID">Loading </p>
<dl>
<dt>Temperature:</dt><dd id="TempID">Loading</dd> 
</dl>
<p id="Tips"> Loading </p>
<script> 
doPrint();
</script>
</center>
</body>
</html>

和 CSS：

body {
background-color: #F9CDF4;
overflow-x: hidden;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #D81B60;
opacity: .9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 25px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 22px;
margin-left: 50px;
font-size: 30px
}
.slide a {
color: #000;
font-size: 36px;
}
#content {
padding: 20px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}

h1 {
color: navy;
font-family: "Segoe UI";
}
p {
color: #D81B60;
font-weight: bold;
}

dt {
text-align: right;
color: navy;
font-weight: bold;
}

dd {
color: #D81B60;
font-weight: bold;
}

const urlParams是未定义的。

我从未使用过新的URLSearchParams(queryString(;，所以我不确定它是如何工作的，但它在我的chrome测试版中不起作用。

你可以这样做，而不用urlSearchParams。

function getWeather(){
const prams = window.location.search.replace('?','&').split('&');
const keyword = prams.filter(v => v.indexOf('keyword') > -1)[0].split('=')[1];
if(keyword){
var link= "https://api.openweathermap.org/data/2.5/weather?q="+keyword+"&APPID=myAPI";
$.getJSON(link,function(json){
var temperatur = json.main.temp;
temperatur = temperatur - 273.15;
var roundtemp = Math.round(temperatur*10)/10;
document.getElementById("TempID").innerHTML = roundtemp;
});
}else{
// keyword notfound
}
}
getWeather();

这是工作 repl.it(https://repl.it/repls/SaneRustyMemwatch(

如果您需要获取另一个值，您可以将关键字行更改为如下所示：

const units = prams.filter(v => v.indexOf('units') > -1)[0].split('=')[1];

如果你打算用它来查询很多不同的值，我会把它变成它自己的函数。

function urlQuery(str){
const prams = window.location.search.replace('?','&').split('&');
return prams.filter(v => v.indexOf(str) > -1)[0].split('=')[1];
}
var keyword = urlQuery('keyword');

好的，我找到了解决方案，Web服务的var链接必须通过https而不是http。

相关内容

最新更新

热门标签：