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


Posted in Javascript onNovember 28, 2013
    <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>
Javascript 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
js实现的折叠导航示例
Nov 29 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 #Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 #Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 #Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 #Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 #Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 #Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 #Javascript
You might like
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
django连接oracle时setting 配置方法
2019/08/29 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
如何真正的了解python装饰器
2020/08/14 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
高三政治教学反思
2014/02/06 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
学生实习证明范文
2014/09/28 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
初婚初育证明范本
2014/11/24 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
公司食堂管理制度
2015/08/05 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL