本文實(shí)例講述了jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢的方法。分享給大家供大家參考，具體如下：
前言
網(wǎng)上有很多開放的api，我們?cè)诒镜赝ㄟ^(guò)ajax獲取數(shù)據(jù)時(shí)，總會(huì)碰到一個(gè)問(wèn)題，那就是跨域！如果不借助php等，僅僅通過(guò)js怎么解決跨域的問(wèn)題呢？或許jsonp是個(gè)不錯(cuò)的選擇。
知識(shí)準(zhǔn)備
之前一篇《說(shuō)說(shuō)JSON和JSONP 也許你會(huì)豁然開朗》對(duì)jsonp已經(jīng)介紹的很詳細(xì)了，這里就不多介紹了，直接上實(shí)例吧
代碼：
<!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> 手機(jī)號(hào)查詢 </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>手機(jī)號(hào)碼歸屬地查詢</h1> <div class="outer"> <p>請(qǐng)輸入手機(jī)號(hào)碼</p> <input type="text" > <span class="button">查詢</span> <span class="error">號(hào)碼有誤 或 無(wú)數(shù)據(jù)</span> <ul> <li class="num">手機(jī)號(hào)碼: <span></span></li> <li class="province">歸屬省份: <span></span></li> <li class="operators">運(yùn) 營(yíng) 商: <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}$/; //點(diǎn)擊查詢 $('.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>希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
