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 switch case 另类写法
Mar 14 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
详解JavaScript常量定义
Jan 03 Javascript
ECMAScript6--解构
Mar 30 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Python实现Linux中的du命令
2017/06/12 Python
基于python时间处理方法(详解)
2017/08/14 Python
20行python代码实现人脸识别
2019/05/05 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python 命令行传入参数实现解析
2019/08/30 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
电子商务专业个人的自我评价分享
2013/10/29 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2015年项目工作总结
2015/04/29 职场文书