jquery使用淘宝接口跨域查询手机号码归属地实例

 更新时间:2013年11月28日 16:49:27   作者:  
这篇文章主要介绍了jquery使用淘宝接口跨域查询手机号码归属地的方法,大家参考使用吧

复制代码 代码如下:

    <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="query.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>

相关文章

  • jQuery实现跨域iframe接口方法调用

    jQuery实现跨域iframe接口方法调用

    页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数,由于两个页面不在一个域中,会提示没权限。如何解决该问题呢,请看下面示例代码。
    2015-03-03
  • jQuery 表单序列化实例代码

    jQuery 表单序列化实例代码

    这篇文章主要介绍了jQuery 表单序列化实例代码,需要的朋友可以参考下
    2017-06-06
  • jquery实现动态改变css样式的方法分析

    jquery实现动态改变css样式的方法分析

    这篇文章主要介绍了jquery实现动态改变css样式的方法,结合实例形式分析了jQuery动态操作css样式的设置、获取及应用等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 用jquery的方法制作一个简单的导航栏

    用jquery的方法制作一个简单的导航栏

    用jquery制作一个简单的导航栏,使用到了addClass及removeClass等方法,需要的朋友可以参考下
    2014-06-06
  • jQuery的deferred对象详解

    jQuery的deferred对象详解

    开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
    2014-11-11
  • jquery点击展示与隐藏更多内容

    jquery点击展示与隐藏更多内容

    这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery过滤选择器用法分析

    jQuery过滤选择器用法分析

    这篇文章主要介绍了jQuery过滤选择器用法,实例分析了:first、:last、:odd、:even等等常用的过滤选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • jQuery参数列表集合

    jQuery参数列表集合

    jQuery参数列表集合,学习jquery的朋友可以收藏下。
    2011-04-04
  • jQuery带进度条全屏图片轮播特效代码分享

    jQuery带进度条全屏图片轮播特效代码分享

    这篇文章主要介绍了jQuery带进度条全屏图片轮播特效,图片轮播效果特别适合做产品展示,还带有进度条转接全屏图片展示,感兴趣的小伙伴可以参考下
    2015-09-09
  • JQuery中使用ajax传输超大数据的解决方法

    JQuery中使用ajax传输超大数据的解决方法

    这篇文章主要介绍了JQuery中使用ajax传输超大数据的解决方法,也就是比较多的数据,超过max_upload_size等设置,本文方法在chrome浏览器下测试通过,需要的朋友可以参考下
    2014-07-07

最新评论