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 parseInt与Number函数的区别
Jan 21 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Three.js基础部分学习
Jan 08 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
vue 修改 data 数据问题并实时显示操作
Sep 07 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 源代码压缩小工具
2009/12/22 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP中phar包的使用教程
2017/06/14 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
用vue设计一个日历表
2020/12/03 Vue.js
Python中with及contextlib的用法详解
2017/06/08 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python实现udp聊天窗口
2020/03/31 Python
Python logging模块原理解析及应用
2020/08/13 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
全国道德模范事迹
2014/02/01 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
感恩的演讲稿
2014/05/06 职场文书
企业文明单位申报材料
2014/05/16 职场文书
天地会口号
2014/06/17 职场文书
工作建议书范文
2019/07/08 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android