ajax天气查询

最新推荐文章于 2021-04-11 15:13:23 发布

weixin_30477797

最新推荐文章于 2021-04-11 15:13:23 发布

阅读量174

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wzy999/p/6554720.html

版权

直接发上代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
    <title>天气查询</title>
   <style>
       .div1{display: inline-block;*display: inline;background: #AABCEF;padding:2px 8px;letter-spacing:3px;font-family: '微软雅黑';border-radius:5px;}
   </style>
</head>
<body>
       <div style="width:1000px;margin:100px auto;">
           <h1>天气查询</h1>
            <input    type="text" placeholder="请输出你的地址" id="tel"/>
            <button id="ajax">确定</button>
            <p><span id="reslut"></span></p>
       </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
$(function() {
   $('#ajax').click(function() {
       var $reslutval = $('#tel').val();
       if($reslutval == '') {
           alert('内容不能为空！');
           return;
       }
       $.ajax({
           type: 'GET',
           dataType: 'jsonp',
           jsonp: 'callback',
           jsonpcallback: 'getName',
           url: 'http://api.asilu.com/weather/', //天气查询api
           data: {
               'city': $reslutval
           },
           success: function(data) {
               var reslutData = data;
               $('#reslut').text('你查询的是：' + reslutData.city + "," + "明天的天气是：" + reslutData.weather[0].weather + ',' + "今天是" + reslutData.weather[0].date + ',' + '温度：' + reslutData.weather[0].temp);
           },
       })
   })
    </script>
</body>
</html>