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

来源：互联网发布：java wait notify 例子编辑：程序博客网时间：2024/06/04 01:14
<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>
0 0