一些 openweathermap API 示例代码的问题答案

【问题标题】：Trouble with some openweathermap API example code一些 openweathermap API 示例代码的问题
【发布时间】：2017-04-02 21:13:03
【问题描述】：

我正在尝试运行以下代码：

var mainWeather = {
  init: function() {
    $("#submitWeather").click(function() {
      return mainWeather.getWeather();
    });
  },

  getWeather: function() {
    $.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "&APPID=myweatherkey_removed", function(data) {
      var json = {
        json: JSON.stringify(data),
        delay: 1
      };
      echo(json);
    });
  },

  // Prints result from the weatherapi, receiving as param an object
  createWeatherWidg: function(data) {
    return "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" +
      "<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" +
      "<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" +
      "<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" +
      "<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" +
      "<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>";
  }
  };

  var echo = function(dataPass) {
  $.ajax({
    type: "POST",
    url: "/echo/json/",
    data: dataPass,
    cache: false,
    success: function(json) {
      var wrapper = $("#weatherWrapper");
      wrapper.empty();
      wrapper.append("<div class='city'> <p>Place: " + json.name + ", " + json.sys.country + "</p></div>");
      wrapper.append(mainWeather.createWeatherWidg(json));
    }
  });
};

mainWeather.init();

和

<!DOCTYPE html>
<html>
    <head>
        <title>Open Weather API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="userArea" class="container">
            <div id="stateWrapper">
                <input type="text" id="cityInput" placeholder="Enter a State" />
            </div>
            <br/>
            <div id="countryWrapper">
                <input type="text" id="countryInput" placeholder="Enter a Country" />
            </div>
            <br/>
            <div id="buttonArea">
                <input type="submit" id="submitWeather" class="btn btn-primary"/>
                <br/>
            </div>
            <!- USED TO SHOW RESULT -->
            <div id="weatherWrapper">
            </div>
        </div>
        <script type="text/javascript" src="jquery-3.1.1.slim.js"></script>
        <script type="text/javascript" src="mainWeather.js"></script>
    </body>
</html>

但是当我点击提交时它不会做任何事情。

Chrome调试器在第9行首先说$.get不是函数，所以搜索后，我将其更改为jquery.get。现在它说这不是一个功能。我不知道我在做什么。有人能解决这个问题吗？

【问题讨论】：

标签： javascript jquery openweathermap

【解决方案1】：

jQuery 的精简版本不包括 Ajax。你可以阅读更多here。
只需将其更改为正常构建即可。

【讨论】：

感谢您的回复。但是，现在使用普通 jquery 运行它会产生此错误：XMLHttpRequest cannot load file:///C:/echo/json/。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。
您使用的是文件协议而不是 http 协议。使用本地服务器，它会工作。搜索并安装 XAMPP 或 WampServer。如果您阅读错误：仅协议方案支持跨源请求：http ...
原始代码调用url: "/echo/json/",，这是一个本地url。
我从他的 jsfiddle 复制了该代码：jsfiddle.net/JeriesHG/5h2k68b7/14/…
哦，ajax调用必须在jsfiddle上模拟。老实说，我无法弄清楚他为什么要进行 ajax 调用来发送 json。