如何通过Jquery导入API数据?

时间:2016-04-18 11:20:58

标签: jquery html api-design

我正在尝试通过API密钥导入一些天气数据,目前我只想在格式化之前显示数据。

基本上我需要通过2个下拉菜单选择一个特定城市来创建天气数据查看器,一个用于选择国家,一个用于选择城市并显示数据。目前我只能选择国家(在创建我的jquery var之前,第二个下拉菜单工作正常)

这里是Html:

<!DOCTYPE html>
<html>

<head>
    <title>Uk Weather Data</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="ajaxjqueryload.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <header>
        <h1>Weather Uk Data</h1>
    </header>
    <section>
        <select id="countries">
            <option selected>Select a Country</option>
            <option value="england-cities">England</option>
            <option value="scotland-cities">Scotland</option>
            <option value="wales-cities">Wales</option>
            <option value="nireland-cities">Northern Ireland</option>
        </select>
        <select id="cities">
            <option selected>
                << Please Select a city</option>
        </select>
        <div id="cityData"></div>
        <div id="info"></div>
    </section>
    <footer>
    </footer>
</body>

</html>

在这里我的jquery:

 $(document).ready(function() {
     $('#countries').change(function() {
             $('#cities').load($(this).val() + '.html');
             $('#cities').change(function) {
                 var weatherData = $(this).val();
                 var weather = $('#cityData option:selected').text();
                 var apiUrl = 'http://apilayer.net/api/live?access_key=45e394a5e9c6d16ba8755822834a7127&info=' + weatherData;
                 $.ajax({
                         url: 'apiUrl',
                         type: 'GET'
                         dataType: 'json'
                         success: function(response) {
                             console.log(JSON.stringify(response));
                         }
                     },
                     error: function() {

                     }
                 })
         }
     });
 });

0 个答案:

没有答案