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学习笔记之jQuery的DOM操作
Dec 22 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 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初学者最感迷茫的问题小结
2010/03/27 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
javascript 模拟点击广告
2010/01/02 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
js面向对象的写法
2016/02/19 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python中树与树的表示知识点总结
2019/09/14 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
二年级学生期末评语
2014/12/26 职场文书
2015年班组长工作总结
2015/04/10 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python