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

Posted 2020-10-02 超级酸

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp跨域请求数据实例之手机号码查询相关的知识，希望对你有一定的参考价值。

网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php，java等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery.min.js"></script>
        <title>手机号码归属地查询</title>
    </head>
    
    <style>
        *{margin: 0;padding: 0;}
        .box{width: 400px;height: 400px;margin: 0 auto;padding: 10px;background: #f3f3f3;}
        .number-input{width: 200px;height: 30px;outline: none;border: 1px solid #ccc;padding-left: 6px;}
        .button{height: 32px;width: 80px;border: none; line-height: 34px;cursor: pointer;margin-left: 30px;}
        p{line-height: 36px;}
        .error{color: red;}
    </style>
    
    <body>
        <div class="box">
            <input type="text" class="number-input" placeholder="请输入手机号"/><button class="button">查询</button>
            <p class="error"></p>
            <p>归属地：<span class="province"></span></p>
            <p>运营商：<span class="catName"></span></p>
            <p>所属公司：<span class="carrier"></span></p>
            <p>手机号码：<span class="telString"></span></p>
        </div>
    </body>
    
    <script type="text/javascript">
        var tel;
        var ajax = function() {
            tel = $(‘.number-input‘).val();
            //淘宝接口   
            $.ajax({
                type: "get",
                url: ‘//tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=‘ + tel,
                dataType: "jsonp",
                jsonp: "callback",
                success: function(data) {
                    $(‘.error‘).html(‘‘);
                    $(‘.province‘).html(data.province);
                    $(‘.catName‘).html(data.province);
                    $(‘.carrier‘).html(data.province);
                }
            });
        }
        
        var reg = /^(13|15|18)[0-9]{9}$/;
        //点击查询
        $(‘.button‘).click(function() {
            tel = $(‘.number-input‘).val();
            if(tel) {
                if(reg.test(tel)) {
                    ajax();
                } else {
                    $(‘.error‘).html(‘‘);
                    $(‘.error‘).html(‘请输入正确的手机号码‘);
                }
            }
        });
        
        //键盘事件
        $(‘.number-input‘).keydown(function(event) {
            if(event.keyCode == 13) {
                tel = $(‘.number-input‘).val();
                if(tel) {
                    if(reg.test(tel)) {
                        ajax();
                    } else {
                        $(‘.error‘).html(‘‘);
                        $(‘.error‘).html(‘请输入正确的手机号码‘);
                    }
                }
            }
        });
    </script>
</html>

以上是关于jsonp跨域请求数据实例之手机号码查询的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript跨域请求和jsonp请求实例