如需要，可申请聚合数据天气预报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. Ubuntu14.04安装ROOT集群

    之前尝试在CentOS7上部署ROOT集群,却发现无论是源码包安装,还是官方提供的二进制包,都缺少了关键的xproofd可执行文件,导致PoD不能运行.没有办法,只能尝试在其他OS上部署,这里我选择了 ...

  2. mysql启动报错：Starting MySQL...The server quit without updating PID file

    在mysql的data目录下误删除了mysql-bin.000001,mysql-bin.000002等文件,但是没有删除mysql-bin.index文件,此时启动mysql就会报错: Starti ...

  3. weblogic 12c下jxls导出excel报错Could not initialize class org.apache.poi.xssf.usermodel.XSSFVMLDrawing

    周一,开发反馈weblogic 12c下jxls导出excel报错,公司环境和UAT环境均报错,看日志如下: 2016-06-08 09:16:55,825 ERROR org.jxls.util.T ...

  4. Linux编辑器vim键盘详解

    下面的这张图,一看就明白了,从此,学习变的不再艰难! 补注:图中没有关于查找和替换的,应该用下面的.自上而下的查找操作                  /word小写的n和N自下而上的查找操作    ...

  5. event 对象 小记

    event对象的属性提供了有关事件的细节并且通过event对象的方法,可以控制事件的继续传播和阻止事件的默认行为 2级DOM Events 标准定义了一个标准的事件模型  被除了IE外的所有现代浏览器 ...

  6. swift学习笔记之-析构过程

    //析构过程deist import UIKit /*析构过程(Deinitialization):析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用.析构器用关键字deinit来标示 ...

  7. swift学习笔记之-继承

    //继承 import UIKit /* 继承(Inheritance): 1.一个类可以继承(inherit)另一个类的方法(methods).属性(properties)和其它特性.当一个类继承其 ...

  8. SQLServer处理行转列和列转行

    掌握SQL Server 行转列和列转行 1.列转行 数据经过计算加工后会直接生成前端图表需要的数据源,但是程序里又需要把该数据经过列转行写入中间表中,下次再查询该数据时直接从中间表查询数据. 1.1 ...

  9. css3实现switch开关效果

    之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 <div class="container"> <div class="bg_ ...

  10. Windows2008系统忘记密码的解决方法

    网上转载的,忘记密码不用发愁了.   windows2008系统忘记密码的解决方法: 利用放大镜的漏洞来重设密码 首先用系统盘来引导 选择修复计算机 然后打开命令提示符:先备份放大镜,然后用CMD替换 ...