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处理AJAX请求的基础学习教程

    使用jQuery处理AJAX请求的基础学习教程

    这篇文章主要介绍了使用jQuery处理AJAX请求的基础学习教程,除此之外还引申了链式处理事件回调的写法,由浅入深非常值得借鉴,需要的朋友可以参考下
    2016-05-05
  • jquery Ajax 实现加载数据前动画效果的示例代码

    jquery Ajax 实现加载数据前动画效果的示例代码

    本篇文章主要是对jquery Ajax实现加载数据前动画效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jquery获取easyui日期控件的值实现方法

    jquery获取easyui日期控件的值实现方法

    下面小编就为大家带来一篇jquery获取easyui日期控件的值实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jquery实现滑动特效代码

    jquery实现滑动特效代码

    这篇文章主要介绍了jquery实现滑动特效代码, .slideUp([duration][,complete])目标元素向上滑入隐藏;.slideDown([duration][,complete])目标元素向下滑出显示;.slideToggle([duration][,complete])目标元素隐藏则向下滑出显示,否则向上滑入隐藏;需要的朋友参考下
    2015-08-08
  • jquery中的$(document).ready()使用小结

    jquery中的$(document).ready()使用小结

    本篇文章主要是对jquery中的$(document).ready()使用方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 创建自己的jquery表格插件

    创建自己的jquery表格插件

    这篇文章主要介绍了一个自己创建的jquery表格插件,实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery渐变发光导航菜单的实例代码

    jQuery渐变发光导航菜单的实例代码

    今天介绍一个jQuery渐变发光效果的导航菜单,这是一个简单的通过jQuery控制opacity实现的导航菜单。
    2013-03-03
  • Bootstrap table 实现树形表格联动选中联动取消功能

    Bootstrap table 实现树形表格联动选中联动取消功能

    这篇文章主要介绍了Bootstrap table 实现树形表格联动选中联动取消功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Jquery对新插入的节点 绑定Click事件失效的解决方法

    Jquery对新插入的节点 绑定Click事件失效的解决方法

    下面小编就为大家带来一篇Jquery对新插入的节点 绑定Click事件失效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同,今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法,需要的朋友参考下吧
    2017-10-10

最新评论