檢索和URL

Question

我試圖檢索和使用JavaScript和URL請求從一個JSON對象，顯示關於當前的天氣信息顯示JSON數據：從URL

http://free.worldweatheronline.com/feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805' 

的數據是這樣的：

{ 
    "data": { 
     "current_condition": [ 
      { 
       "cloudcover": "75", 
       "humidity": "88", 
       "observation_time": "03:30 PM", 
       "precipMM": "2.7", 
       "pressure": "1008", 
       "temp_C": "12", 
       "temp_F": "54", 
       "visibility": "8", 
       "weatherCode": "302", 
       "weatherDesc": [ 
        { 
         "value": "Moderate rain" 
        } 
       ], 
       "weatherIconUrl": [ 
        { 
         "value": "http://www.worldweatheronline.com/images/wsymbols01_png_64/wsymbol_0018_cloudy_with_heavy_rain.png" 
        } 
       ], 
       "winddir16Point": "SE", 
       "winddirDegree": "140", 
       "windspeedKmph": "17", 
       "windspeedMiles": "11" 
      } 
     ], 
     "request": [ 
      { 
       "query": "DE3", 
       "type": "Postcode" 
      } 
     ], 
     "weather": [ 
      { 
       "date": "2012-05-09", 
       "precipMM": "11.8", 
       "tempMaxC": "13", 
       "tempMaxF": "56", 
       "tempMinC": "12", 
       "tempMinF": "53", 
       "weatherCode": "266", 
       "weatherDesc": [ 
        { 
         "value": "Light drizzle" 
        } 
       ], 
       "weatherIconUrl": [ 
        { 
         "value": "http://www.worldweatheronline.com/images/wsymbols01_png_64/wsymbol_0017_cloudy_with_light_rain.png" 
        } 
       ], 
       "winddir16Point": "SE", 
       "winddirDegree": "141", 
       "winddirection": "SE", 
       "windspeedKmph": "12", 
       "windspeedMiles": "7" 
      }, 
      { 
       "date": "2012-05-10", 
       "precipMM": "11.1", 
       "tempMaxC": "18", 
       "tempMaxF": "64", 
       "tempMinC": "6", 
       "tempMinF": "43", 
       "weatherCode": "353", 
       "weatherDesc": [ 
        { 
         "value": "Light rain shower" 
        } 
       ], 
       "weatherIconUrl": [ 
        { 
         "value": "http://www.worldweatheronline.com/images/wsymbols01_png_64/wsymbol_0009_light_rain_showers.png" 
        } 
       ], 
       "winddir16Point": "SSW", 
       "winddirDegree": "209", 
       "winddirection": "SSW", 
       "windspeedKmph": "30", 
       "windspeedMiles": "19" 
      } 
     ] 
    } 
} 

我已經嘗試了幾個腳本來嘗試獲取數據並將其顯示在div中。第一個是這樣的：

$.ajax({ 
    url: "http://free.worldweatheronline.com/feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805" 
    dataType: 'json', 
    success: function(data) { 
     jQuery.each(data, function() { 
      alert("HELLO"); 
      alert("Current Cloud Cover = " + this.data.current_condition.cloudcover); 
      alert("Current Humidity = " + this.data.current_condition.humidity); 
     }); 
    } 
}); 

第二個看起來像這樣：

var postcode = document.getElementById("address").value; 

function getWeather(userName, count) { 

    $.getJSON(
    'http://free.worldweatheronline.com/feed/weather.ashx?q' + postcode + '&format=json&num_of_days=2&key=ec9c2dc5ba201904120805', 
    {}, 
    showWeather, 
    //'jsonp' 
); 

}

function showWeather(day) { 

    var str = '<ul>'; 
    str += '<h2>Tweets from ' + postcode + '</h2>'; 
    var i = 0; 
    $.each(day, function(index, value) { 
     if (i == count) return; 
     var dt = new Date(value.date); 
     str += '<p>'; 
     str += value.temp_C; //gets "text" from JSON 
     str += '</p>'; 
     str += ''; 
     str += ''; 
     i++; 
    }); 
} 

我想從JSON URL的天氣信息，並顯示一些的信息在一個div中，任何人都可以解釋如何做到這一點是這兩個腳本不工作。

Answer 1

$.ajax({ 
    url: "http://free.worldweatheronline.com/feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805", 
    dataType: 'jsonp', // You need to use 'jsonp' here because it is cross domain request 
    success: function(data) { 
     $.each(data, function(index, value) { 
      alert(value.current_condition[0].cloudcover); 
      alert(value.current_condition[0].humidity); 
      alert(value.current_condition[0].weatherDesc[0].value); 
      alert(value.request[0].query); 
      alert(value.request[0].query); 
      $.each(value.weather, function(i, val) { 
       alert(val.precipMM); 
       alert(val.weatherDesc[0].value); 
      }) 
     }); 
    } 
}); 

DEMO

Answer 2

有幾個問題......以下應該工作（修改第一個代碼塊）。

$.ajax({ 
    url: "http://free.worldweatheronline.com/feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805&callback=?", 
    dataType: 'jsonp', 
    success: function(data){ 
     jQuery.each(data, function(){ 
      alert(JSON.stringify(this)); 
      alert("Current Cloud Cover = " + this.current_condition[0].cloudcover); 
      alert("Current Humidity = " + this.current_condition[0].humidity); 
     }); 
    } 
}); 

要回顧一下：

1. 您需要使用JSONP規避跨站點腳本處理的限制（做，通過添加 「&回調=？」 到AJAX URL
2. 。 JSON響應的根是數據，所以你需要寫data.data。
3. current_condition屬性是一個數組 - 必須添加一個索引器（即[0]）來訪問它。