jsonp跨域请求数据实例——手机号码查询

<span style="font-size:18px;"><!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>
    <script src="js/jquery-1.10.2.min.js"></script>
    <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 () {
        //    //淘宝接口    
        //    //$.getJSON跨域访问的的url格式为 url?callback=?
        //    $.getJSON('http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=' + tel+"&callback=?",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);
        //    });
           
        //}
        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>
</span>
jsonp跨域请求数据实例——手机号码查询

相关推荐
