javascript - getJSON 覆盖 HTML 背景颜色

Question

我正在创建一个 HTML 页面，它使用 jQuery、iFrames 并具有简单的 CSS。当我针对 openweathermap.org 中的 json 文件运行 jQuery 脚本时，它会覆盖设置的 HTML 背景颜色以及任何 iframe。有什么建议吗？

<style>
    body {
        background-color: #ff5000;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div id = "weather"></div>
<script>
    $( "weather" ).ready(function(){ 
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Castlebar,ie&appid=44db6a862fba0b067b1930da0d769e98");
        document.write('hello');
        console.log('works')
    });

</script>

Answer 1

JSON RESTful 请求不应更改您的背景...

您的请求需要一个回调函数，以便您可以处理数据。

$('#weather').ready(function(request) {
  $.getJSON('http://api.openweathermap.org/data/2.5/weather', {
    q     : 'Castlebar,ie',
    appid : '44db6a862fba0b067b1930da0d769e98'
  }, function(data, textStatus, jqXHR) {
    var city    = data.name;
    var country = data.sys.country;
    var weather = data.weather[0].description;
    
    // Prints: "Current weather for Castlebar, IE: light rain"
    $('#weather').html('Current weather for ' + city + ', ' + country + ': ' + weather);
  });
});

body {
  background-color: #ff5000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="weather"></div>

JSON 响应

{
  "coord": {
    "lon": -9.3,
    "lat": 53.85
  },
  "weather": [
    {
      "id": 500,
      "main": "Rain",
      "description": "light rain",
      "icon": "10d"
    }
  ],
  "base": "cmc stations",
  "main": {
    "temp": 278.229,
    "pressure": 1016.87,
    "humidity": 100,
    "temp_min": 278.229,
    "temp_max": 278.229,
    "sea_level": 1024.44,
    "grnd_level": 1016.87
  },
  "wind": {
    "speed": 5.27,
    "deg": 231.001
  },
  "rain": {
    "3h": 0.2
  },
  "clouds": {
    "all": 76
  },
  "dt": 1455729355,
  "sys": {
    "message": 0.0024,
    "country": "IE",
    "sunrise": 1455695530,
    "sunset": 1455731463
  },
  "id": 2965654,
  "name": "Castlebar",
  "cod": 200
}