ajax查询天气

最新推荐文章于 2024-04-22 15:07:14 发布

otatoz

最新推荐文章于 2024-04-22 15:07:14 发布

阅读量562

点赞数

分类专栏： jQuery 文章标签： jquery 天气查询 ajax get方法

本文链接：https://blog.csdn.net/qq_42720683/article/details/82838700

版权

jQuery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>天气查询</title>
  <script src="jquery-3.3.1/jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
  城市：<input type="text" id="city">
  <button>查询</button>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <script>
    var url = 'https://www.apiopen.top/weatherApi?city='
    $('button').click(function(){
      var $inp = $('#city').val();
      var newUrl = url+$inp;
      console.log(newUrl);
      var one = '';
      var two = '';
      var three = '';
      var four = '';
      var five = '';
      $.get({
        url:newUrl,
        success:function(res){
          var wea = res.data.forecast;
          console.log(wea)
          wea.forEach(function(item,index){
            if(index == 0){
              one=item.date+' '+item.high+' '+item.low+' '+item.fengxiang+' '+item.fengli+' '+item.type
            }
            if(index == 1){
              two=item.date+' '+item.high+' '+item.low+' '+item.fengxiang+' '+item.fengli+' '+item.type
            }
            if(index == 2){
              three=item.date+' '+item.high+' '+item.low+' '+item.fengxiang+' '+item.fengli+' '+item.type
            }
            if(index == 3){
              four=item.date+' '+item.high+' '+item.low+' '+item.fengxiang+' '+item.fengli+' '+item.type
            }
            if(index == 4){
              five=item.date+' '+item.high+' '+item.low+' '+item.fengxiang+' '+item.fengli+' '+item.type
            }
          })
          $('p').eq(0).text(one)
          $('p').eq(1).text(two)
          $('p').eq(2).text(three)
          $('p').eq(3).text(four)
          $('p').eq(4).text(five)
        }
      });
    })
    
  </script>
</body>

otatoz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax查询天气

&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge&qu
复制链接

扫一扫