jsonp全国天气案例
<!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全国天气案例的更多相关文章
- 使用jsonp获取天气情况
在这里使用的是百度天气: 整体代码如下: js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js ...
- 个人永久性免费-Excel催化剂功能第96波-地图数据挖宝之全国天气查询(区域最细可到区县,最长预报4天)
天气预报的信息,是很普通的大家习以为常的信息,但如果不进行采集,在日常数据分析过程中,就少了非常重要的一个分析维度,如果人手采集整理,工作量巨大.此篇给广大数据分析工作者再次减负,只需简单一键,即可批 ...
- jsonp 调用天气API
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- hadoop 天气案例
对下面一组气温数据进行处理,得到每个月份最高的两个气温值 2018-12-12 14:30 25c2018-12-12 15:30 26c2017-12-12 12:30 36c2019-01-01 ...
- 天气类API调用的代码示例合集:全国天气预报、实时空气质量数据查询、PM2.5空气质量指数等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 全国天气预报:数据来自国家气象局,可根据地名.经纬度GPS.IP查 ...
- JSONP跨域访问百度实现搜索提示小案例
一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...
- JS调用腾讯接口获取天气
想做个直接通过JS获取某个城市的天气.本来想通过直接调用中国气象网的接口: http://www.weather.com.cn/weather/101070201.shtml,但是跨域问题一直无法解决 ...
- 中国天气网接口返回json格式分析及接口(XML、图片接口)说明
实时天气: city "北京"//城市 cityid "101010100"//城市编码 temp "17&qu ...
- jsonp跨域ajax跨域get方法
原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...
随机推荐
- UWP多线程枚举安全的List
最近在做windows runtime下APP开发的工作.在Service层请求返回后,往往会通过回调的形式来通知UI更新数据.多个线程操作经常出现foreach抛出异常:System.Invalid ...
- ubuntu 关闭和开启防火墙
1.关闭ubuntu的防火墙 ufw disable 2开启防火墙 ufw enable 3.卸载了iptables apt-get remove iptables 4.关闭ubuntu中的防火墙的其 ...
- Spring-JDBDTamplate 的操作
基本的 增,删,改:(只演示增加 因为他们调用的方法都是update方法): package com.hxzy.spring_jdbc_template; import org.springfr ...
- spring包下载方法
http://blog.csdn.net/liangtiaoxian/article/details/52780747 https://jingyan.baidu.com/article/2fb0ba ...
- Get 和 Post 方法的选择和URL的设计
原文链接:http://yifei.me/note/540 HTTP 中常用的方法有 GET/POST/PUT/DELETE 等,在设计API或者表单的时候我们需要选择合适的方法.一般有两种方案: 只 ...
- [JS] 瀑布流加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 【FAQ】Maven 本地仓库明明有jar包,pom文件还是报错解决办法
方法一: 找到出错的jar包文件位置,删掉_maven.repositories文件 方法二: maven中的本地仓库的index索引没有更新导致 解决方案: 在eclipse中打开菜单 window ...
- django参考博客学习
网上发现其他人的一个django系列博客,和我学的一样是黑马的,写的挺不错的,转载学习一下 https://blog.csdn.net/u014745194/article/category/6989 ...
- jvm字节码简介
1.概述 java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的数字(成为操作码,Opcde)和跟随其后的0到多个此操作所需参数(操作数,Operands).由于操作码的长度为一个字节,所以指 ...
- Python3之urllib模块
简介 urllib是python的一个获取url(Uniform Resource Locators,统一资源定位符),可以用来抓取远程的数据. 常用方法 (1)urlopen urllib.requ ...