Javascript 从URL检索和显示JSON数据_Javascript_Jquery_Ajax_Json

Javascript 从URL检索和显示JSON数据

javascript jquery ajax json

Javascript 从URL检索和显示JSON数据,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我正在尝试使用javascript和URL请求从JSON对象检索和显示当前天气的信息： http://free.worldweatheronline.com/feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805' URL中的数据如下所示： { "data": { "current_condition": [ {

我正在尝试使用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"
            }
        ]
    }
}

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

我已经尝试了几个脚本来尝试获取数据并取出位以显示在div中。第一个脚本如下所示：

   {
    "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"
            }
        ]
    }
}

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

第二个是这样的：

   {
    "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"
            }
        ]
    }
}

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

}

我想从JSON URL获取天气信息，并在div中显示一些信息，有人能解释一下怎么做吗？这两个脚本都不起作用。

有一些问题。。。下面应该可以修改第一个代码块

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

重述：

您需要使用JsonP绕过跨站点脚本限制，通过添加&callback=？到AJAX URL。 JSON响应的根是data，因此需要编写data.data。 current_condition属性是一个数组-必须添加索引器ie[0]才能访问它。

如果有错误信息，你能发布它吗？查看错误的最简单方法是使用GoogleChrome，右键单击页面，选择Inspect元素，然后单击Console选项卡以打开JavaScript控制台。我怀疑您遇到了跨站点脚本错误，因为您试图从其他域下载数据。我认为您需要做一些服务器端工作才能使其正常工作。Thansk用于回复，但我的控制台窗口中没有显示任何内容。alertHello是否在您第一次尝试时生成？showWeather函数实际上从未返回或回显任何代码-可能在第二个示例中，使用getJSON，代码运行良好，但您从未使用它做过任何事情？在警报中，您为什么使用data.data而不是this.data？有一个循环正在使用jQuery.eachdata，函数{…}；-另外，current_condition是一个数组，但是它没有current_condition对象的数组，所以它不应该是this.data.current_condition和this.data.request等等。@Dutchie432好问题。答案涉及咖啡因及其缺乏。更正。