jsonp跨域請求數據實例——手機號碼查詢

時間 2019-11-19

標籤 jsonp 請求數據實例手機號碼查詢欄目 JSON 简体版

原文原文鏈接

前言javascript

　　網上有不少開放的api，咱們在本地經過ajax獲取數據時，總會碰到一個問題，那就是跨域！若是不借助php等，僅僅經過js怎麼解決跨域的問題呢？或許jsonp是個不錯的選擇。php

知識準備 css

　　上篇博客 : JSON和JSONP （含jQuery實例）（轉）對jsonp已經介紹的很詳細了，這裏就很少介紹了，直接上實例吧html

demojava

　　代碼jquery

<!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>