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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
非常漂亮的js烟花效果
Mar 10 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学习笔记之二
2011/01/17 PHP
php 面向对象的一个例子
2011/04/12 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP 实现重载
2021/03/09 PHP
javascript顺序加载图片的方法
2015/07/18 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
layui分页效果实现代码
2017/05/19 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Python新手学习标准库模块命名
2020/05/29 Python
python中pop()函数的语法与实例
2020/12/01 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
国庆节演讲稿
2014/05/27 职场文书
2014年采购部工作总结
2014/11/20 职场文书
故意伤害辩护词
2015/05/21 职场文书
革命电影观后感
2015/06/18 职场文书
祝寿主持词
2015/07/02 职场文书
Java实现简单小画板
2022/06/10 Java/Android
教你nginx跳转配置的四种方式
2022/07/07 Servers