jquery ajax跨域取数据

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

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

 var tel;

     var ajax=function(){

         $.ajax({

              type: "get",

              url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel,

              dataType: "jsonp",  //jsonp跨域

              jsonp: "callback",

              success: function(data){

                 console.log(data);

                 $('.error').css('display','none');

                 var province = data.province,

                     operators = data.catName,

                     num = data.telString;

                 $('.num span').html(num);

                 $('.province span').html(province);

                 $('.operators span').html(operators);

              },

              error:function (){

                 $('li span').html('');

                 $('.error').css('display','block');

              }

          });

     }

     var reg = /^(13|15|18)[0-9]{9}$/;//点击查询

     $('.button').click(function(){

         tel=$('input[type=text]').val();

         if(tel){

             if(reg.test(tel)){

                 ajax();

             }else{

                 $('li span').html('');

                 $('.error').css('display','block');

             }

         }

     });

     //键盘事件

     $(window).keydown(function(event){

         tel=$('input[type=text]').val();

         if(event.keyCode==13) {

             if(tel){

                 if(reg.test(tel)){

                     ajax();

                 }else{

                     $('li span').html('');

                     $('.error').css('display','block');

                 }

             }

         }

     });

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 <title> 查询 </title>

 <script type="text/javascript" src="http://files.cnblogs.com/BeginMan/jquery-1.8.3.min.js" ></script>

 <script type="text/javascript" src="jsonp.js"</script>

 </head>

 <body>

     <h1>手机号码归属地查询</h1>

     <div class="outer">

         <p>请输入手机号码</p>

         <input type="text"  >

         <span class="button">查询</span>

         <span class="error">号码有误 或 无数据</span>

         <ul>

             <li class="num">手机号码:<span></span></li>

             <li class="province">归属省份:<span></span></li>

             <li class="operators">运 营 商:<span></span></li>

         </ul>

     </div>

 </body>

 </html>

巴特西

jquery ajax跨域取数据

最新文章

热门文章