jquery ajax跨域取数据

使用JSONP跨域请求数据

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_34054931

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zoujking/p/3680853.html

本文介绍如何利用jQuery AJAX和JSONP实现跨站点请求数据的方法，并通过具体示例展示了手机号码归属地查询功能的实现过程。

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="http://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>