jsonp全国天气案例

案例1:
1.获取跨域数据
2.将数据按照下面的效果放到body里面
jsonp全国天气案例_第1张图片
  jsonp全国天气案例_第2张图片
jsonp全国天气案例_第3张图片
 

key:  f49570d39b02b3c203526b5d8255aa61
079179afb105ce2bae9f5d0028d56ff9
 
自己理解的笔记:
jsonp全国天气案例_第4张图片
 

 html:
 1 DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Documenttitle>
 6 head>
 7 <body>
 8 <inputtype="button"value="获取最近一周的天气">
 9 body>
10 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
11 <scripttype="text/javascript">
12 var $btn = $("input");
13 $btn.on("click",function(){
14 $.ajax({
15 /*http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key*/
16 type:"get",
17 url:'http://v.juhe.cn/weather/index?format=2&cityname=广州&key=079179afb105ce2bae9f5d0028d56ff9',
18 data:{
19 wd:"html"
20 },
21 dataType:"jsonp",//跨域
22 // jsonp: "cb",
23 success:function(data){
24 // console.log(data);
25 // console.log(data.result.today);
26 $table = $(""+27"
日期星期温度天气风向
"); 28 var funine = data.result.future; 29 for(var i in funine){ 30 $tr = $(""+funine[i].date+""+funine[i].week+""+funine[i].temperature+""+funine[i].weather+""+funine[i].wind+""); 31 $table.append($tr); 32 $("body").append($table); 33 } 34 var today = data.result.today; 35 // console.log(today); 36 $h1 = $("

当地城市:"+today.city+"

"); 37 $h2 = $("

今日温度:"+today.temperature+"

"); 38 $h3 = $("

穿衣指数:"+today.dressing_index+"

"); 39 $h4 = $("

穿衣建议:"+today.dressing_advice+"

"); 40 $("body").append($h1); 41 $("body").append($h2); 42 $("body").append($h3); 43 $("body").append($h4); 44 } 45 }); 46 }); 47 script> 48 html>
View Code

 

效果:
jsonp全国天气案例_第5张图片
 
案例2:
用百度的跨域数据
在输入框中输入关键字
在下面显示与关键字有关的信息
jsonp全国天气案例_第6张图片
 1 DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Documenttitle>
 6 head>
 7 <body>
 8 <inputtype="text"/>
 9 body>
10 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
11 <scripttype="text/javascript">
12 var $input = $("input");
13 $input.on("input",function(){
14 var $val = $(this).val();
15 $.ajax({
16 url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$val+'&cb=fn',
17 data:{
18 wd:"html"
19 },
20 dataType:"jsonp",//跨域
21 jsonp:"cb",
22 success:function(data){
23 // console.log(data);
24 }
25 })
26 });
27 function fn(data){
28 $("body ul").html("");
29 for(var i in data.s){
30 var $ul = $("
    "); 31 var $li = $("
  • "); 32 $li.text(data.s[i]); 33 $ul.append($li); 34 $("body").append($ul); 35 } 36 } 37 script> 38 html>
    View Code

     

    效果:
    jsonp全国天气案例_第7张图片

    转载于:https://www.cnblogs.com/ChenChunChang/p/6628164.html

    你可能感兴趣的:(javascript,ViewUI)