0

JavaScriptとURLリクエストを使用して、JSONオブジェクトから現在の天気に関する情報を取得して表示しようとしています。

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

URLのデータは次のようになります。

   {
    "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);
        });
    }
});

2番目のものは次のようになります。

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に表示したいのですが、これを行う方法を誰かが説明できますか。これら2つのスクリプトは機能しません。

4

2 に答える 2

6 
$.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);
            })
        });
    }
});

デモ

于 2012-05-09T16:37:50.773 に答える
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に「＆callback =？」を追加してください）。
  2. JSON応答のルートはdataであるため、data.dataを記述する必要があります。
  3. current_conditionプロパティは配列です。アクセスするには、インデクサー（つまり、[0]）を追加する必要があります。
于 2012-05-09T16:35:45.833 に答える