getJSON API 适用于 localhost 但不适用于网络服务器答案

【问题标题】：getJSON API works on localhost but not on webservergetJSON API 适用于 localhost 但不适用于网络服务器
【发布时间】：2020-01-29 07:45:07
【问题描述】：

我想构建一个显示城市天气的网络应用程序（通过用户输入）。我有三个文件（用于获取用户输入的 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;

}

【问题讨论】：

当您说“$.getJSON 函数未执行”时。 - 控制台有错误吗？你能在网络标签中看到通话吗？
一个问题是您是否通过 https 运行页面。我注意到一些导入是 https，而 ajax 是 http。可能是由于 https 网站上的混合内容而被拒绝
在以下意义上没有执行：我将 document.write("x") 放在代码的各个部分以查看它仍然出现的位置，当我将它放在 getJSON 行之后时它没有出现.并且该网站是通过 HTTPS 提供的，我注意到它可以在我的 safari 中使用 http 的 iphone 上运行，但不能在使用 https 的其他浏览器上运行。但我不知道为什么我的 safari 浏览器通过 http 访问它....
这意味着回调没有被执行而不是getJSON函数。查看控制台：是否有错误？（我希望跨源错误）。查看“网络”选项卡：是否发出请求？它得到响应了吗？
我是web开发新手，不知道怎么调试，只用notepad++之类的编辑器写代码

标签： javascript html css json webserver

【解决方案1】：

const urlParams 未定义。

我从未使用过 new 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');

【讨论】：

【解决方案2】：

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

【讨论】：