使用jQuery和YQL提取Yahoo Weather

时间:2016-05-26 08:52:16

标签: javascript jquery json yql yahoo-weather-api

我正在尝试使用YQL从Yahoo中提取天气。但是由于某些原因没有任何返回,但是我已经尝试手动调用带有Select语句的URL,它确实返回了我想要的结果。有人可以帮我调试我的代码出错吗?

$(function(){

    var loc1 = 'Singapore, Singapore'; // Singapore
    var u = 'c';
    var query1 = "SELECT * FROM weather.forecast WHERE woeid in (select woeid from geo.places(1) where text='" + loc1 + "' AND u='" + u + "'";
    var cacheBuster = Math.floor((new Date().getTime()) / 3600 / 1000);

    var url1 = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query1) + '&format=json&_nocache=' + cacheBuster;

    window['wxCallback1'] = function(data) {
        var info = data.query.results.channel;
        $('#wxIcon1').append('<img src="weathericon/' + info.item.condition.code + '.gif" width="52" height="52" title="' + info.item.condition.text + '" /><br>' + info.item.condition.text + '<br>');
        $('#wxTemp1').html(info.item.forecast[0].low + '<font style="FONT-WEIGHT:normal; FONT-SIZE:12px">&deg;' + (u.toUpperCase()) + '</font>' + ' - ' + info.item.forecast[0].high + '<font style="FONT-WEIGHT:normal; FONT-SIZE:12px">&deg;' + (u.toUpperCase()) + '</font>');
        $('#wxHum1').html(info.atmosphere.humidity + '<font style="FONT-WEIGHT:normal; FONT-SIZE:12px">%</font>');

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

});

1 个答案:

答案 0 :(得分:0)

管理找到问题。这里是完整的工作代码,包括之前遗漏的HTML部分。请注意条件代码表示要显示的图形文件。见https://www.igorkromin.net/index.php/2015/09/11/yahoo-weather-condition-code-to-weather-icons-font-mapping/

<!doctype html>
<html lang="en">
    <HEAD>
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=23)">
<title>selWeather</title>

</HEAD>

<body topmargin="0" leftmargin="0" style="BACKGROUND-COLOR:transparent">

<table cellpadding="1" cellspacing="1" border="0" width="194">
      <tr>
        <td colspan="2" valign="middle" bgcolor="#d0690a">
          <font style="FONT-SIZE:10px; COLOR:#ffffff; FONT-FAMILY:Arial, helvtical, verdana, tahoma">
          SINGAPORE<br>
          </font>
        </td>
      </tr>
      <tr>
        <td rowspan="3" valign="middle" align="center" width="50%">
          <font style="FONT-SIZE:10px; COLOR:#000000; FONT-FAMILY:Arial, helvtical, verdana, tahoma">
          <span id="wxIcon1"></span>
          </font><br>
        </td>
        <td valign="middle" align="center">
          <font style="FONT-SIZE:10px; COLOR:#000000; FONT-FAMILY:Arial, helvtical, verdana, tahoma">
          TEMPERATURE</font><br>
          <font style="FONT-WEIGHT:bold; FONT-SIZE:20px; COLOR:#000000">
          <span id="wxTemp1"></span>
        </td>
      </tr>
      <tr>
        <td height="1" bgcolor="#999999"></td>
      </tr>
      <tr>
        <td valign="top" align="center">
          <!-- <hr style="WIDTH: 90%; COLOR: #999999; HEIGHT: 1px"> -->
          <font style="FONT-SIZE:10px; COLOR:#000000; FONT-FAMILY:Arial, helvtical, verdana, tahoma">
          HUMIDITY</font><br>
          <font style="FONT-WEIGHT:bold; FONT-SIZE:20px; COLOR:#000000">
          <span id="wxHum1"></span></font><br>
        </td>
      </tr>
      </table>

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

<script type="text/javascript">

$(function(){

    var loc1 = 'Singapore, Singapore'; // Singapore
    var u = 'c';
    var query1 = "SELECT * FROM weather.forecast WHERE woeid in (select woeid from geo.places(1) where text='" + loc1 + "') AND u='" + u + "'";
    var cacheBuster = Math.floor((new Date().getTime()) / 3600 / 1000);

    var url1 = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query1) + '&format=json&_nocache=' + cacheBuster;

    window['wxCallback1'] = function(data) {
        var info = data.query.results.channel;
        $('#wxIcon1').append('<img src="weathericon/' + info.item.condition.code + '.gif" width="52" height="52" title="' + info.item.condition.text + '" /><br>' + info.item.condition.text + '<br>');
        $('#wxTemp1').html(info.item.forecast[0].low + '<font style="FONT-WEIGHT:normal; FONT-SIZE:12px">&deg;' + (u.toUpperCase()) + '</font>' + ' - ' + info.item.forecast[0].high + '<font style="FONT-WEIGHT:normal; FONT-SIZE:12px">&deg;' + (u.toUpperCase()) + '</font>');
        $('#wxHum1').html(info.atmosphere.humidity + '<font style="FONT-WEIGHT:normal; FONT-SIZE:12px">%</font>');

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

});

</script>
</body>
</HTML>