jsonp全国天气案例

案例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全国天气案例

最新文章

热门文章