Ajax无法使用API​​调用

时间：2015-12-17 20:38:45

标签： json ajax api

我正在尝试编写一个下拉列表来显示不同的国家/地区的天气情况。当用户选择国家时，天气状况将显示在底部。 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body>
  <form id="form">
    <div>
      <select id="getCountry" onchange="getWeather(this.value)">
        <option value="">Select a Country:</option>
        <option value="Singapore">Singapore</option>
        <option value="China">China</option>
        <option value="Malaysia">Malaysia</option>
        <option value="Cambodia">Cambodia</option>
        <option value="Vietnam">Vietnam</option>
      </select>
    </div>
  </form>

  <div id="resultContainer">
  </div>

</body>

</html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">
  var resultContainer = $('#resultContainer');
  var output = '';

  //------------ LOCAL WEATHER ----------------

  $(document).ready(function() {
    $("#getCountry").select(getCountry);
  });

  function getCountry() {
    var inputCountry = $("#getCountry").val();
    // get value from the textfield 


    var localWeatherInput = {
      query: inputCountry,
      format: 'JSON',
      num_of_days: '2',
      date: '',
      fx: '',
      cc: '',
      includelocation: '',
      show_comments: '',
      callback: 'LocalWeatherCallback'
    };

    JSONP_LocalWeather(localWeatherInput);
    e.preventDefault();
  }

  function LocalWeatherCallback(localWeather) {

    output = "<br/> Cloud Cover: " + localWeather.data.current_condition[0].cloudcover;
    output += "<br/> Humidity: " + localWeather.data.current_condition[0].humidity;
    output += "<br/> Temp C: " + localWeather.data.current_condition[0].temp_C;
    output += "<br/> Visibility: " + localWeather.data.current_condition[0].weatherDesc[0].value;
    output += "<br/> Observation Time: " + localWeather.data.current_condition[0].observation_time;
    output += "<br/> Pressue: " + localWeather.data.current_condition[0].pressure;

    resultContainer.empty();
    resultContainer.html(output);

  }

  //-------------------------------------------
  function JSONP_LocalWeather(input) {
    var _FreeApiBaseURL = 'http://api.worldweatheronline.com/free/v2/';
    var _FreeApiKey = 'ded6d9349e5334a39e2e2f26fd996';
    var url = _FreeApiBaseURL +
      'weather.ashx?q=' + input.query +
      '&format=' + input.format +
      '&extra=' + input.extra +
      '&num_of_days=' + input.num_of_days +
      '&date=' + input.date +
      '&fx=' + input.fx +
      '&cc=' + input.cc +
      '&includelocation=' + input.includelocation +
      '&show_comments=' + input.show_comments +
      '&key=' + _FreeApiKey;

    jsonP(url, input.callback);
  }
</script>

我不确定我错误地编写了代码，目前我能够看到下拉列表。 enter image description here

1 个答案:

答案 0 :(得分：0)

一种简单的方法是使用getJSON方法并遍历结果：

function JSONP_LocalWeather(input) {
    var _FreeApiBaseURL = 'http://api.worldweatheronline.com/free/v2/';
    var _FreeApiKey = 'abc';
    var url = _FreeApiBaseURL +
      'weather.ashx?q=' + input.query +
      '&format=' + input.format +
      '&extra=' + input.extra +
      '&num_of_days=' + input.num_of_days +
      '&date=' + input.date +
      '&fx=' + input.fx +
      '&cc=' + input.cc +
      '&includelocation=' + input.includelocation +
      '&show_comments=' + input.show_comments +
      '&key=' + _FreeApiKey;

    $.getJSON(url).done(function (d) {
        $("#resultContainer").text('Feels like: ' + d.data.current_condition[0].FeelsLikeC);
    });
}

会显示：

Feels like: 28
相关问题
最新问题