本文實例講述了jsonp跨域請求數據實現手機號碼查詢的方法。分享給大家供大家參考，具體如下：
前言
網上有很多開放的api，我們在本地通過ajax獲取數據時，總會碰到一個問題，那就是跨域！如果不借助php等，僅僅通過js怎么解決跨域的問題呢？或許jsonp是個不錯的選擇。
知識準備
之前一篇《說說JSON和JSONP 也許你會豁然開朗》對jsonp已經介紹的很詳細了，這里就不多介紹了，直接上實例吧
代碼：
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><meta name="author" content="@my_coder"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title> 手機號查詢 </title><style type="text/css">html{color:#000;background:#fff;}body,ul,li,input,h1,button,p{padding:0;margin:0;}li{list-style:none;}html{background:#F6F8FC;overflow:hidden;}.outer{margin:0 auto;width:280px;position:relative;}h1{font-size:20px;text-align:center;border-bottom:1px dotted #A3C4DB;padding:10px 0;}p{font-size:14px;padding:14px 0 10px;}input[type="text"]{width:200px;height:30px;font-size:18px;}.button{display:inline-block;width:60px;font-size:16px;text-align:center;line-height:34px;background:linear-gradient(#fff,#ccc);border:1px solid #004;border-radius:3px;cursor:pointer;}ul{padding-top:26px;}li {font-size:18px;line-height:30px;}.error{position:absolute;left:4px;top:80px;color:red;font-size:14px;display:none;}</style></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><script type="text/javascript" src="jquery-1.8.0.min.js" ></script><script> var tel; var ajax=function(){ //淘寶接口 $.ajax({ type: "get", url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel, dataType: "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'); } } } });</script></body></html>希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
