Question

我正在创建一个使用jQuery，iFrames并具有简单CSS的HTML页面。当我从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请求不应该改变您的背景......

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

＆＃13;

$('#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);
  });
});

＆＃13;

body {
  background-color: #ff5000;
}

＆＃13;

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

＆＃13;

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
}

Answer 2

我认为你想要做的是改变#weather的HTML，而不是重写整个文档。你可以这样做：

$('#weather').html("INSERT YOUR DESIRED CONTENT HERE");

因此，您从getJSON（）解析JSON，提取有趣的信息，并使用上面的代码行将其插入#weather。我已经为您准备了一个JSFiddle示例代码。我不得不在那里对json进行硬编码，因为JSFiddle不会让我从你的链接中获取JSON，因为它不是HTTPS链接，而只是在你自己的页面上用var json = *JSON*取代var json = $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Castlebar,ie&appid=44db6a862fba0b067b1930da0d769e98");它应该工作。

https://jsfiddle.net/k87yuats/

编辑：我忘了在你自己的页面上提到你必须使用getJson（）的.done（）功能来确保AJAX请求在尝试解析JSON数据之前完成：http://api.jquery.com/jquery.getjson/

getJSON覆盖HTML背景颜色

2 个答案:

JSON响应