案例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>
效果：
用百度的跨域数据
在输入框中输入关键字
在下面显示与关键字有关的信息
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>
效果：
