Question

我使用此代码在几个月前将当前的温度和天气状况添加到我的网站上，本周早些时候我注意到它变成了空白。我假设我需要更新jQuery或yahoo api，但我尝试的一切都无法正常工作。

HTML：

<div id="wxWrap">
    <span id="wxIntro">
        Currently in Galveston: 
    </span>
    <span id="wxIcon2"></span>
    <span id="wxTemp"></span>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

CSS：

#wxWrap {
width: 240px;
background: #EEE; /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
padding: 2px 13px 2px 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#wxIntro {
display: inline-block;
font: 14px/20px lato,Verdana,sans-serif;
color: #666;
vertical-align: top;
padding-top: 9px;
}
#wxIcon {
display: inline-block;
width: 61px;
height: 34px;
margin: 2px 0 -1px 1px;
overflow: hidden;
background: url('http://l.yimg.com/a/lib/ywc/img/wicons.png') no-repeat 61px 0;
}
#wxIcon2 {
display: inline-block;
width: 34px;
height: 34px;
margin: 1px 6px 0 8px;
overflow: hidden;
}
#wxTemp {
display: inline-block;
font: 20px/28px lato,Verdana,sans-serif;
color: #333;
vertical-align: top;
padding-top: 5px;
margin-left: 0;
}

JS：

$(function(){

// Specify the ZIP/location code and units (f or c)
var loc = '77551'; // or e.g. SPXX0050
var u = 'f';

var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;

window['wxCallback'] = function(data) {
    var info = data.query.results.channel.item.condition;
    $('#wxIcon').css({
        backgroundPosition: '-' + (61 * info.code) + 'px 0'
    }).attr({
        title: info.text
    });
    $('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
    $('#wxTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
};

$.ajax({
    url: url,
    dataType: 'jsonp',
    cache: true,
    jsonpCallback: 'wxCallback'
});

});

Answer 1

想出来，雅虎改变了查询结构，就像现在一样，results.channel为null：

"data":{"query":{"count":0,"created":"2016-03-30T18:27:42Z","lang":"en-
US","results":null}},"status":200,"config":{"transformRequest":[null]....

在这里查看文档： https://developer.yahoo.com/weather/

另请注意以下查询方式，您需要设置很多逻辑，并且可能不需要对查询进行编码：

<script>
  var callbackFunction = function(data) {
    var wind = data.query.results.channel.wind;
    alert(wind.chill);
  };
</script>

<script src="https://query.yahooapis.com/v1/public/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text='chicago, il')&format=json&callback=callbackFunction"></script>

小提琴：

Old Fiddle not working ，请注意查询：http://jsfiddle.net/omarjmh/yFc6J/162/

New Fiddle working ，但查询解析现在不正确，无论哪种方式，您都可以看到数据实际上正在返回：http://jsfiddle.net/omarjmh/sbwtfap7/

*我正在控制台中记录repsonse对象，打开它并检查出来。祝你的应用好运！

使用jQuery和YQL的天气突然停止工作

1 个答案: