Fork me on GitHub

jquery ajax跨域取数据 

jsonp.js/html  主要是利用jquery ajax和jsonp的datatype 跨站点请求数据，记录~

同源策略：同端口，同协议，同域；所以ajax不能支持跨域取得数据，解决方案一般是jsonp但是它只支持get请求；诸如window.name,CORS;
   Html5中还有window.postMessage();都是解决方案

 1 var tel;
 2     var ajax=function(){
 3         $.ajax({
 4              type: "get",
 5              url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel,
 6              dataType: "jsonp",  //jsonp跨域
 7              jsonp: "callback",
 8              success: function(data){
 9                 console.log(data);
10                 $('.error').css('display','none');
11                 var province = data.province,
12                     operators = data.catName,
13                     num = data.telString;
14 
15                 $('.num span').html(num);
16                 $('.province span').html(province);
17                 $('.operators span').html(operators);
18              },
19              error:function (){    
20                 $('li span').html('');
21                 $('.error').css('display','block');        
22              }
23          });
24     }
25     var reg = /^(13|15|18)[0-9]{9}$/;//点击查询
26     $('.button').click(function(){
27         tel=$('input[type=text]').val();
28         if(tel){
29             if(reg.test(tel)){
30                 ajax();
31             }else{
32                 $('li span').html('');
33                 $('.error').css('display','block');    
34             }
35         }
36     });
37     //键盘事件
38     $(window).keydown(function(event){
39         tel=$('input[type=text]').val();
40         if(event.keyCode==13) {
41             if(tel){
42                 if(reg.test(tel)){
43                     ajax();
44                 }else{
45                     $('li span').html('');
46                     $('.error').css('display','block');    
47                 }
48             }
49         }
50     });
View Code
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 6 <title> 查询 </title>
 7 <script type="text/javascript" src="https://files.cnblogs.com/BeginMan/jquery-1.8.3.min.js" ></script>
 8 <script type="text/javascript" src="jsonp.js"</script>
 9 </head>
10 <body>    
11     <h1>手机号码归属地查询</h1>
12     <div class="outer">
13         <p>请输入手机号码</p>
14         <input type="text"  >
15         <span class="button">查询</span>
16         <span class="error">号码有误 或 无数据</span>
17         <ul>
18             <li class="num">手机号码:<span></span></li>            
19             <li class="province">归属省份:<span></span></li>
20             <li class="operators">运 营 商:<span></span></li>
21         </ul>
22     </div>
23 </body>
24 </html>
View Code

 

posted @ 2014-04-22 16:48  Kingler  阅读(507)  评论(1)    收藏  举报