jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢實(shí)例分析

更新時(shí)間：2015年12月12日 15:36:42 作者：挨踢前端

這篇文章主要介紹了jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jsonp跨域請(qǐng)求數(shù)據(jù)的原理與查詢號(hào)碼的應(yīng)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢的方法。分享給大家供大家參考，具體如下：

前言

網(wǎng)上有很多開(kāi)放的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ì)豁然開(kāi)朗》對(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');  
      }
    }
  });
  //鍵盤(pán)事件
  $(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ì)有所幫助。

您可能感興趣的文章: