带有jQuery和YQL的Weather突然停止工作

Question

几个月前，我使用此代码将当前温度和天气状况添加到我的网站，本周早些时候我注意到它变为空白。我假设我需要更新jQuery或yahooapi，但我尝试的一切都不起作用。

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为空：

"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>

Fiddles:

旧Fiddle不工作，注意查询：http://jsfiddle.net/omarjmh/yFc6J/162/

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

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