Я хочу создать веб-приложение, которое показывает погоду города (через userinput). У меня есть три файла (index. html для получения userinput, index2. html для получения данных и их отображения и файл css). Проблема в том, что когда я запускаю сайт локально через путь к файлу в chrome, он работает как надо. Но когда я загружаю файлы на веб-сервер, функция $ .get JSON не выполняется. Первые несколько раз это работало хорошо, но потом я сделал изменения, которые больше не работают. Это не работает, когда я даже удаляю некоторый код и просто тестирую функцию basi c. Локально он отлично работает с тем же кодом. Я сделал некоторую отладку и заметил, что все выполняется, кроме get JSON 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;
}