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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
axios基本入门用法教程
Mar 25 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 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语法速查表
2007/01/02 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
transform python环境快速配置方法
2018/09/27 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
详解Django admin高级用法
2019/11/06 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
自我鉴定模板
2013/10/29 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
投资建议书模板
2014/05/12 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
投诉信格式范文
2015/07/02 职场文书
公司安全管理制度范本
2015/08/05 职场文书
入党后的感想
2015/08/10 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电