jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢實(shí)例分析
本文實(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ì)有所幫助。
- jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
- 通過(guò)jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請(qǐng)求
- JavaScript用JSONP跨域請(qǐng)求數(shù)據(jù)實(shí)例詳解
- 基于Jquery的跨域傳輸數(shù)據(jù)(JSONP)
- AJAX跨域請(qǐng)求之JSONP獲取JSON數(shù)據(jù)
- 使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解
- AngularJS實(shí)現(xiàn)的JSONP跨域訪問(wèn)數(shù)據(jù)傳輸功能詳解
- Ajax的jsonp方式跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例
- AJAX跨域請(qǐng)求JSONP獲取JSON數(shù)據(jù)的實(shí)例代碼
- jsonp跨域獲取數(shù)據(jù)的基礎(chǔ)教程
相關(guān)文章
基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能
這篇文章主要介紹了基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2016-01-01Js與Jq 獲取頁(yè)面元素值的方法和差異對(duì)比
這篇文章主要介紹了原生js獲取瀏覽器和對(duì)象寬高與jquery獲取瀏覽器和對(duì)象寬高的方法關(guān)系對(duì)比,十分實(shí)用,需要的朋友可以參考下2015-04-04jQuery實(shí)現(xiàn)的卷簾門滑入滑出效果【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的卷簾門滑入滑出效果,結(jié)合具體實(shí)例形式分析了jQuery事件綁定及slideToggle方法實(shí)現(xiàn)滑入滑出效果相關(guān)操作技巧,需要的朋友可以參考下2019-02-02jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例分享
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例,感興趣的小伙伴們可以參考一下2016-03-03jQuery form插件的使用之處理server返回的JSON, XML,HTML數(shù)據(jù)
這篇文章主要介紹了jQuery form插件的使用之處理server返回的JSON, XML,HTML數(shù)據(jù) 的相關(guān)資料,需要的朋友可以參考下2016-01-01淺談jQuery animate easing的具體使用方法(推薦)
下面小編就為大家?guī)?lái)一篇淺談jQuery animate easing的具體使用方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果
這篇文章主要介紹了原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果,介紹到了jQuery實(shí)現(xiàn)淡入淡出輪播效果的基本原理,感興趣的小伙伴們可以參考一下2015-12-12jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
用jquey bind 點(diǎn)擊事件時(shí),傳參不注意可能會(huì)導(dǎo)致點(diǎn)擊每一行都是顯示相同內(nèi)容的情況,下面有個(gè)示例,感興趣的朋友可以參考下2014-08-08