跨域问题的解决方案

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>