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 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python制作Windows系统服务
2017/03/25 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
关于环保的建议书400字
2014/03/12 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
法制宣传日活动总结
2014/04/29 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
校运动会广播稿300字
2014/10/07 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
小学体育教学随笔
2015/08/14 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js