如需要，可申请聚合数据天气预报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. 判断s2是否能够被通过s1做循环移位（rotate）得到的字符串是否包含

    问题:给定两个字符串s1和s2,要求判断s2是否能够被通过s1做循环移位(rotate)得到的字符串包含.例如,S1=AABCD和s2=CDAA,返回true:给定s1=ABCD和s2=ACBD,返回 ...

  2. AC自动机---Searching the String

    ZOJ   3228 题目网址:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=16401 Description Little ...

  3. sqlite3之基本操作（一）

    简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经 ...

  4. PHP学习笔记：伪静态规则的书写

    这里以阿帕奇为服务器软件,直接上案例: 1.把index.html重定向到index.php RewriteEngine On Options -Indexes ReWriteRule ^index. ...

  5. 两种设计模式(2)==>>"单例"

    所谓“单例”: 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资 ...

  6. jdk1.8 J.U.C之FutureTask实现机制分析

    我画了一张关于FutureTask的类图,主要包括FutureTask的几个重要的函数和字段,还有它和父类的关系. 根据上面图我们可以清晰的看出FutureTask的继承关系.FutureTask继承 ...

  7. 安装多JDK后，java编译环境和运行环境版本(JDK版本) 不一致解决：

    由于之前安装过JDK1.7 ,现在一个项目是JDK1.5的,那么需要更改了环境变量了,此处不再赘述如何设置JDK 的环境变量了.然后网上找来方法: 在安装多个jdk后,出现了java -version ...

  8. 【GOF23设计模式】中介者模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_中介者模式.同事协作类.内部类实现 package com.test.mediator; /** * 同事类的接口 */ ...

  9. IOS6学习笔记（一）

    一.ARC 1.ARC环境下可以使用-(void)dealloc{};处理一些事情(比如移除KVO观察),但不要调用[super dealloc]; 2.ARC与非ARC混编要注意符合Cocoa命名约 ...

  10. 选择Web API还是WCF

    ASP.NET WCF是.NET平台服务开发的一站式框架,那么为什么还要有ASP.NET Web API呢?简单来说,ASP.NET Web API的设计和构建只考虑了一件事情,那就是HTTP,而WC ...