jQuery和YQL的天氣突然停止工作

Question

幾個月前，我使用此代碼將當前溫度和天氣狀況添加到我的網站，並且本週早些時候我注意到它變爲空白。我假設我需要更新jQuery或雅虎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爲空：

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

小提琴：

舊小提琴不工作，請注意查詢：http://jsfiddle.net/omarjmh/yFc6J/162/

新小提琴工作，但查詢解析現在是不正確，無論哪種方式，你可以看到的數據其實是在迴歸：http://jsfiddle.net/omarjmh/sbwtfap7/

*我登錄控制檯repsonse對象，打開它，並檢查出來。 與您的應用程序祝你好運！