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 相关文章推荐
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
我常用的几个类
2006/10/09 PHP
PHP微信支付开发实例
2016/06/22 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
javascript中一些util方法汇总
2015/06/10 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
javascript实现拖放效果
2015/12/16 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
办公室规章制度范本
2015/08/04 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP