jsonp.js/html 主要是利用jquery ajax和jsonp的datatype 跨站点请求数据，记录~
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 });
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>
jquery ajax跨域取数据,布布扣,bubuko.com
原文：http://www.cnblogs.com/zoujking/p/3680853.html
