如需要，可申请聚合数据天气预报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. 备份和还原SQL Server及压缩Access数据库

    功能说明:备份和恢复SQL Server数据库 * 作者: 刘功勋; * 版本:V0.1(C#2.0);时间:2007-1-1 * 当使用SQL Server时,请引用 COM组件中的,SQLDMO. ...

  2. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  3. Chrome浏览器的Timing分析

    以W3C网站为例: Stalled是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接等时间等. SSL( ...

  4. A -- HDU 4585 Shaolin

    Shaolin Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d , %I64u Java clas ...

  5. Android 手机卫士13--进程设置

    1.显示隐藏系统进程 修改ProcessManagerActivity的Adapter ..... @Override public int getCount() { if(SpUtil.getBoo ...

  6. Android的新虚拟机ART

  7. 简洁侧边wordpress博客模板

    模板描述:商务领航,尽现成熟稳重的个人小站风格     响应式Web设计,自适应电脑.平板电脑.移动设备     图标字体库,自适应各种终端设备,保证图形图标清晰无锯齿,支持Retina(视网膜屏幕) ...

  8. PHP控制前台弹出对话框

    应用场景: 微信授权登录过程中,需要用户确认,故衍生此需求: 相应的逻辑不放在前端的原因是,此部分逻辑属于偏功能业务,所以放在后端,方便统一管理. 解决办法: 通过php echo出javascrip ...

  9. C# DevExpress 的gridControl或gridView数据导出失败解决方法

    来自:http://blog.csdn.net/lybwwp/article/details/8049464 谢谢 在使用DevExpress 的GridPanel控件的时候出现了一个莫名其妙的现象, ...

  10. APP icon 自动来做，photoshop 做圆角图片

    项目上传到应用市场,没有美工配合,那就只能自己捉刀了. 有几个点快捷键要注意,对使用ps有帮助 (1)ctrl+enter 建立选区 (2)建立选区后,移动到另外的图层,按delete键就为删除 (3 ...