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对table的td进行相同内容合并示例详解
Dec 27 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php数组遍历类与用法示例
2019/05/24 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
利用python画一颗心的方法示例
2017/01/31 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python版本的仿windows计划任务工具
2018/04/30 Python
python 编码规范整理
2018/05/05 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python实现大学人员管理系统
2019/10/25 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
python压包的概念及实例详解
2021/02/17 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
高二地理教学反思
2014/01/24 职场文书
小学音乐教学反思
2014/02/05 职场文书
艺术教育实施方案
2014/05/03 职场文书
与美同行演讲稿
2014/09/13 职场文书
公司委托书范本5篇
2014/09/20 职场文书
2015年党建工作总结
2015/03/30 职场文书
初中家长意见
2015/06/03 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python