如需要，可申请聚合数据天气预报API：https://www.juhe.cn/docs/api/id/39，并生成AppKey。

接口地址：http://v.juhe.cn/weather/index
支持格式：json/xml
请求方式：get
请求示例：http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY
调用样例及调试工具：API测试工具
请求参数说明：

  名称 类型 必填 说明
  cityname string Y 城市名或城市ID，如："苏州"，需要utf8 urlencode
  dtype string N 返回数据格式：json或xml,默认json
  format int N 未来6天预报(future)两种返回格式，1或2，默认1
  key string Y 你申请的key

HTML部分代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" >

    <title>天气预报</title>

    <script src="jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="w.css">

</head>

<body>  

<div id="mf_weather">

    <script src="w.js"></script>

    <button id="search">天气查询</button>

    <input id="city" type="text" value="tbody">

    <div class="ctn">

    <div id="mufeng">  

    </div>

        <div id="future"></div>

    </div>

</div>  

</body>

</html>

JavaScript部分：

$(function(){

        /*

        * 1.输入城市名

        * 2，点击的时候发送请求

        * 3.响应成功渲染页面

        * */  

        $('#search').on('click',function(){  

            var city = $('#city').val()||'北京';

            $citycode=urlencode(city);  

 url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=c82727e986a4f6cfc6ba1984f1f9183a';

             $.ajax({url: url,

                 dataType: "jsonp",

                type:"get",  

                 data:{location:city},

                success:function(data){

                    var sk = data.result.sk;

        var today = data.result.today;

        var futur = data.result.future;

        var fut = "日期温度天气风向";

                   $('#mufeng').html("<p>" + '当前:  ' + sk.temp + '℃  , ' + sk.wind_direction + sk.wind_strength + ' , ' + '空气湿度' + sk.humidity + ' , 更新时间' + sk.time + "</p><p style='padding-bottom: 10px;'>" + today.city + ' 今天是:  ' + today.date_y + ' ' + today.week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "<p></p>");  

   $('#future').html("<p>" + '未来:  ' + futur[0].temperature+ '℃  , ' + futur[0].weather + futur[0].wind + ' , ' + ' , 更新时间' + futur[0].week+futur[0].date + "</p><p style='padding-bottom: 10px;'>" + today.city + "<p></p>");  

           }     });  

        });

  function urlencode (str) {

    str = (str + '').toString();     

    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').

    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');

}

})

　　

预览图（比较简单粗糙）

 

聚合数据天气预报API-ajax 通过城市名取数据的更多相关文章

  1. 聚合数据全国天气预报API--ajax 通过城市名取数据

    聚合数据天气预报API:https://www.juhe.cn/docs/api/id/39 接口地址:http://v.juhe.cn/weather/index 支持格式:json/xml 请求方 ...

  2. python抓取数据，python使用socks代理抓取数据

    在python中,正常的抓取数据直接使用urllib2 这个模块: import urllib2 url = 'http://fanyi.baidu.com/' stream = urllib2.ur ...

  3. 天气预报API(五)：城市代码--“新编码”和“旧编码” 对比

    参考一些博客.文章 来查找 测试 接口,后来发现两套城市编码标准,有点想法,故拿来对比分析. 注:新旧编码是个人主观叫法,只是为了方便称呼,可能有不当之处,请留言更正. 暂且称 中国天气网等网站使用的 ...

  4. ajax是异步的,异步取数据，如何能保证数据是存在的。

    https://segmentfault.com/q/1010000002964172 ajax是异步的,所以aa()在执行的时候,return的那个result本身就是空的,在此后的某些秒以后,re ...

  5. Android——Service装取数据

    在Service里面装数据,从Activity里面用serviceConnection取数据 xml <?xml version="1.0" encoding="u ...

  6. 聚合数据全国天气预报api接口

    查询天气预报在APP中常用的一个常用功能,聚合数据全国天气预报api接口可以根据根据城市名/id查询天气.根据IP查询天气.据GPS坐标查询天气.查询城市天气三小时预报,并且支持全国不同城市天气预报查 ...

  7. 使用聚合数据API查询快递数据-短信验证码-企业核名

    有位朋友让我给他新开的网站帮忙做几个小功能,如下: 输入快递公司.快递单号,查询出这个快件的所有动态(从哪里出发,到了哪里) 在注册.登录等场景下的手机验证码(要求有一定的防刷策略) 通过输入公司名的 ...

  8. Android访问中央气象台的天气预报API得到天气数据

      最新说明:该接口已失效! 2014-03-04 可申请它公布的API,需申请:http://smart.weather.com.cn/wzfw/smart/weatherapi.shtml 在用A ...

  9. 天气预报API(四)：全国城市代码列表（“新编码”）

    说明 天气预报API系列文章涉及到的天气网站10个左右,只发现了中国气象频道和腾讯天气城市代码参数特别: 暂且称 中国气象频道.腾讯天气使用的城市代码为 "新编码" 注:中国气象频 ...

随机推荐

  1. 【Unity】13.3 Realtime GI示例

    分类:Unity.C#.VS2015 创建日期:2016-04-19 一.简介 使用简单示例而不是使用实际示例的好处是能让你快速理解光照贴图和光影效果相关的概念和基本设置办法,这样可避免实际复杂场景中 ...

  2. 关于IIS寄宿WCF服务，客户端不能生成代理类

    我在使用VS2010写好WCF的Web服务后,部署在IIS7.0上,可以在IE9上进行访问,并且能显示XML数据,如下图 然后我在项目的客户端进行服务的添加引用,如下图 VS2010自动生成代理类,但 ...

  3. DataList分页访问FooterTemplate模板里的控件

    今天做DataList分页的时候,突然想把分页控件写在FooterTemplate模板里面,弄了很久都访问不到控件,终于发现问题所在,以下是访问FooterTemplate里控件的方法: <Fo ...

  4. alter语法的简单的使用

    用alter语法来新增列名,修改列名,删除列

  5. POJ 1681---Painter's Problem（高斯消元）

    POJ   1681---Painter's Problem(高斯消元) Description There is a square wall which is made of n*n small s ...

  6. git 删除错误提交的commit

    方法: 根据–soft –mixed –hard,会对working tree和index和HEAD进行重置:    git reset --mixed:此为默认方式,不带任何参数的git reset ...

  7. [.NET] 使用C#开发SQL Function来提供数据 - 天气预报

    [.NET] 使用C#开发SQL Function来提供数据 - 天气预报 范例下载 范例程序代码:点此下载 问题情景 开发人员在设计一些数据汇整的系统服务时,可能会选择WCF.WebAPI.Sign ...

  8. Javascript面向对象编程（二）--- 构造函数的继承

    这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动 ...

  9. Force.com微信开发系列（八）生成带参数的二维码

    为了满足用户渠道推广分析的需要,公众平台提供了生成带二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送.目前有两种类型的二维码,分别是临时二维码和永久二维码 ...

  10. JSON/XML格式化插件比较

    一.引子 Chrome工具里面有很多json格式化的插件,可以让杂乱的json内容变得有序,我们先来看看效果: 正常情况下: 格式化后: 规整多了吧! 二.工具分享+比对 1.JSON Formatt ...