Question

我想构建一个显示城市天气的网络应用程序（通过用户输入）。我有三个文件（用于获取用户输入的index.html，用于获取数据并显示它的index2.html和一个CSS文件）。问题是，当我通过chrome中的文件路径在本地运行网站时，它可以正常运行。但是，当我将文件上传到Web服务器上时，不会执行$ .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;

}

Answer 1

常量urlParams 未定义。

我从没使用过新的URLSearchParams（queryString）; ，所以我不确定它是如何工作的，但是在我的Chrome Beta版中却无法使用。

您可以通过这种方式执行此操作，而无需使用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();

这是工作代表（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');

Answer 2

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

getJSON API在本地主机上有效，但在网络服务器上不可用

2 个答案: