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动态加载以及确定加载完成的代码
Jul 31 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JS array 数组详解
2009/03/22 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
求职信格式要求
2014/05/23 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
交心谈心活动总结
2015/05/11 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
Android实现图片九宫格
2022/06/28 Java/Android