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 fckeditor集成代码
May 10 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP 学习路线与时间表
2010/02/21 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
初识Laravel
2014/10/30 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python psutil模块使用方法解析
2019/08/01 Python
python 魔法函数实例及解析
2019/09/25 Python
python多进程并行代码实例
2019/09/30 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
大一期末自我鉴定
2013/12/13 职场文书
超市创业计划书
2014/04/24 职场文书
预备党员考察意见范文
2015/06/01 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript