1.解决跨域问题，JSONP是一种常用的方法（jsonp的一个缺点是，仅能接受GET方式）
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获取第三方天气数据</title> 6 <style type="text/css"> 7 #div1{ 8 position:relative; 9 left: 50%; 10 background: lightGreen; 11 300px; 12 height: 500px; 13 overflow-y: scroll; 14 overflow-x: hidden; 15 margin-left: -150px; 16 padding-bottom: 20px; 17 } 18 #div1 select{ 19 margin-left : 80px; 20 margin-top : 10px; 21 height: 30px; 22 } 23 #div1 input{ 24 height: 30px; 25 } 26 #div1 div{ 27 300px; 28 background: lightBlue; 29 border-bottom: red solid 1px; 30 } 31 #div1 div ul li{ 32 list-style-type: none; 33 padding-left: 10px; 34 } 35 36 37 </style> 38 <script type="text/javascript"> 39 function abc(data){ 40 var d = data.weather; 41 var info = document.getElementById('info'); 42 info.innerHTML = ''; 43 44 for(var i=0;i<d.length;i++){ 45 var date = d[i].date; 46 var day = d[i].info.day; 47 var night = d[i].info.night; 48 var tag = ''; 49 tag += '<span>日期：'+date+'</sapn><ul>'; 50 tag += '<li>白天天气：'+day[1]+'</li>' 51 tag += '<li>白天温度：'+day[2]+'</li>' 52 tag += '<li>白天风向：'+day[3]+'</li>' 53 tag += '<li>白天风速：'+day[4]+'</li>' 54 tag += '</ul>'; 55 56 tag += '<ul>'; 57 tag += '<li>夜间天气：'+night[1]+'</li>' 58 tag += '<li>夜间温度：'+night[2]+'</li>' 59 tag += '<li>夜间风向：'+night[3]+'</li>' 60 tag += '<li>夜间风速：'+night[4]+'</li>' 61 tag += '</ul>'; 62 var div = document.createElement('div'); 63 div.innerHTML = tag; 64 info.appendChild(div); 65 66 } 67 } 68 69 window.onload = function(){ 70 var city = document.getElementById('city'); 71 city.onchange = function(){ 72 document.getElementById('info').innerHTML = ''; 73 } 74 var btn = document.getElementById('btn'); 75 76 btn.onclick = function(){ 77 var cityCode = city.value; 78 var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=abc&code='+city.value; 79 var script = document.createElement('script'); 80 script.src = url; 81 document.body.appendChild(script); 82 } 83 84 } 85 </script> 86 </head> 87 <body> 88 <div id="div1"> 89 <select id="city"> 90 <option value="101010100">北京</option> 91 <option value="101020100">上海</option> 92 <option value="101280101">广州</option> 93 <option value="101280601">深圳</option> 94 </select> 95 <input type="button" value="查看天气" id="btn"> 96 <div id="info"></div> 97 </div> 98 </body> 99 </html>
-------------------------------------------------------
jquery跨域jsonp
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery跨域jsonp</title> 6 </head> 7 <body> 8 <input type="button" id="btn" value="点击"> 9 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 13 $.ajax({ 14 type : "get", 15 async: false, 16 url : "./jsonp.php", 17 dataType : "jsonp", 18 //jsonp: "qwe",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 19 //jsonpCallback:"liudehua",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);) 20 success : function(data){ 21 console.log(data); 22 }, 23 error:function(){ 24 console.log('fail'); 25 } 26 }); 27 28 }); 29 30 </script> 31 </body> 32 </html>