案例1：
1.获取跨域数据
2.将数据按照下面的效果放到body里面

 

 

key: f49570d39b02b3c203526b5d8255aa61
079179afb105ce2bae9f5d0028d56ff9
 
自己理解的笔记：

 

 html：
 <!DOCTYPE html>

 <htmllang="en">

 <head>

 <metacharset="UTF-8"/>

 <title>Document</title>

 </head>

 <body>

 <inputtype="button"value="获取最近一周的天气">

 </body>

 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 <scripttype="text/javascript">

 var $btn = $("input");

 $btn.on("click",function(){

 $.ajax({

 /*http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key*/

 type:"get",

 url:'http://v.juhe.cn/weather/index?format=2&cityname=广州&key=079179afb105ce2bae9f5d0028d56ff9',

 data:{

 wd:"html"

 },

 dataType:"jsonp",//跨域

 // jsonp: "cb",

 success:function(data){

 // console.log(data);

 // console.log(data.result.today);

 $table = $("<table border = 1><tr>"+

 "<th>日期</th><th>星期</th><th>温度</th><th>天气</th><th>风向</th></tr></table>");

 var funine = data.result.future;

 for(var i in funine){

 $tr = $("<tr><td>"+funine[i].date+"</td><td>"+funine[i].week+"</td><td>"+funine[i].temperature+"</td><td>"+funine[i].weather+"</td><td>"+funine[i].wind+"</td></tr>");

 $table.append($tr);

 $("body").append($table);

 }

 var today = data.result.today;

 // console.log(today);

 $h1 = $("<h1>当地城市:"+today.city+"</h1>");

 $h2 = $("<h3>今日温度:"+today.temperature+"</h3>");

 $h3 = $("<h3>穿衣指数:"+today.dressing_index+"</h3>");

 $h4 = $("<h3>穿衣建议:"+today.dressing_advice+"</h3>");

 $("body").append($h1);

 $("body").append($h2);

 $("body").append($h3);

 $("body").append($h4);

 }

 });

 });

 </script>

 </html>
效果：

 

案例2：

用百度的跨域数据
在输入框中输入关键字
在下面显示与关键字有关的信息
 <!DOCTYPE html>

 <htmllang="en">

 <head>

 <metacharset="UTF-8"/>

 <title>Document</title>

 </head>

 <body>

 <inputtype="text"/>

 </body>

 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 <scripttype="text/javascript">

 var $input = $("input");

 $input.on("input",function(){

 var $val = $(this).val();

 $.ajax({

 url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$val+'&cb=fn',

 data:{

 wd:"html"

 },

 dataType:"jsonp",//跨域

 jsonp:"cb",

 success:function(data){

 // console.log(data);

 }

 })

 });

 function fn(data){

 $("body ul").html("");

 for(var i in data.s){

 var $ul = $("<ul></ul>");

 var $li = $("<li></li>");

 $li.text(data.s[i]);

 $ul.append($li);

 $("body").append($ul);

 }

 }

 </script>

 </html>
效果：

jsonp全国天气案例的更多相关文章

  1. 使用jsonp获取天气情况

    在这里使用的是百度天气: 整体代码如下: js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js ...

  2. 个人永久性免费-Excel催化剂功能第96波-地图数据挖宝之全国天气查询（区域最细可到区县，最长预报4天）

    天气预报的信息,是很普通的大家习以为常的信息,但如果不进行采集,在日常数据分析过程中,就少了非常重要的一个分析维度,如果人手采集整理,工作量巨大.此篇给广大数据分析工作者再次减负,只需简单一键,即可批 ...

  3. jsonp 调用天气API

    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...

  4. hadoop 天气案例

    对下面一组气温数据进行处理,得到每个月份最高的两个气温值 2018-12-12 14:30 25c2018-12-12 15:30 26c2017-12-12 12:30 36c2019-01-01 ...

  5. 天气类API调用的代码示例合集：全国天气预报、实时空气质量数据查询、PM2.5空气质量指数等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 全国天气预报:数据来自国家气象局,可根据地名.经纬度GPS.IP查 ...

  6. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  7. JS调用腾讯接口获取天气

    想做个直接通过JS获取某个城市的天气.本来想通过直接调用中国气象网的接口: http://www.weather.com.cn/weather/101070201.shtml,但是跨域问题一直无法解决 ...

  8. 中国天气网接口返回json格式分析及接口（XML、图片接口）说明

    实时天气: city        "北京"//城市 cityid      "101010100"//城市编码 temp        "17&qu ...

  9. jsonp跨域ajax跨域get方法

    原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...

随机推荐

  1. unity 移动物体的方式

    1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...

  2. 用 go 写 WebAssembly入门

    Golang WebAssembly 入门 Golang 在1.11版本中引入了 WebAssembly 支持,意味着以后可以用 go编写可以在浏览器中运行的程序,当然这个肯定也是要受浏览器沙盒环境约 ...

  3. RabbitMq初探——消息分发

    消息分发 前言 我们在用到消息队列的场景,一般是处理逻辑复杂,耗时,所以将同步改为异步处理,接入队列,下游处理耗时任务. 队列消息数量很大,且下游worker进程(消费者)处理耗时长,所以就有了任务的 ...

  4. docker 存储驱动之 overlay2

    overlay2 简介 OverlayFS是一种和AUFS很类似的文件系统,与AUFS相比,OverlayFS有以下特性:  1) 更简单地设计 2) 从3.18开始,就进入了Linux内核主线 3) ...

  5. vue 动态组件

    动态组件 多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件 内置组件 (内置组件不会被渲染到页面上) component is属性     keep-aliv ...

  6. 【招聘】滴滴滴~ i春秋内推直通车来咯，帮你找工作！

    凑是这么简单粗暴,i春秋冬日特享福利!虽然金九银十已经过去,但素想换工作想找工作的小哥哥小姐姐看过来! [职位方向]渗 透 测 试.代 码 审 计.安全开发.病毒分析.风险控制.安全运维.....任何 ...

  7. PDF转HTML的方法。

    上个项目客户提出了一个需求,要求把PDF格式的文件转化为HTML格式. 上网查了一下,要么使用软件处理,要么是HTML格式转化为PDF.因为涉及到图文识别问题,所以说仅仅依靠前端不能实现.在网上查了几 ...

  8. FCN详解

    转载自:https://www.cnblogs.com/gujianhan/p/6030639.html 论文地址:https://arxiv.org/pdf/1411.4038v1.pdf 背景 C ...

  9. Python基础部分的疑惑解析（2）

    变量: 变量名由 字母.数字.下划线构成,数字不能做为开头 不能用关键字:另外一些内置的方法也别用 推荐使用下划线命名间两个单词user_id 变量在最后底层处理的时候没什么意义,但是在命名的时候有利 ...

  10. Django-工程搭建

    -----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3   2.安装django pip install django==1.11.11 ...