jsonp全国天气案例

案例1：

1.获取跨域数据

2.将数据按照下面的效果放到body里面

key: f49570d39b02b3c203526b5d8255aa61

079179afb105ce2bae9f5d0028d56ff9

自己理解的笔记：

html：

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 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 = $("<table border = 1><tr>"+
27 "<th>日期</th><th>星期</th><th>温度</th><th>天气</th><th>风向</th></tr></table>");
28 var funine = data.result.future;
29 for(var i in funine){
30 $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>");
31 $table.append($tr);
32 $("body").append($table);
33 }
34 var today = data.result.today;
35 // console.log(today);
36 $h1 = $("<h1>当地城市:"+today.city+"</h1>");
37 $h2 = $("<h3>今日温度:"+today.temperature+"</h3>");
38 $h3 = $("<h3>穿衣指数:"+today.dressing_index+"</h3>");
39 $h4 = $("<h3>穿衣建议:"+today.dressing_advice+"</h3>");
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

效果：

案例2：

用百度的跨域数据

在输入框中输入关键字

在下面显示与关键字有关的信息

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 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 = $("<ul></ul>");
31 var $li = $("<li></li>");
32 $li.text(data.s[i]);
33 $ul.append($li);
34 $("body").append($ul);
35 }
36 }
37 </script>
38 </html>

View Code

效果：