<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>

jquery使用淘宝接口跨域查询手机号码归属地实例的更多相关文章

  1. 关于http和https淘宝支付宝跨域解决方法研究

    关于http和http跨域淘宝解决方式研究: http://buyer.trade.taobao.com/trade/pay.htm?spm=a1z01.2.3.4.0.wZAGp9&bizO ...

  2. 淘宝接口实现ip归属地查询

    <?php header('content-type:text/html;charset=utf-8'); /*获取当前ip归属地 调用淘宝接口 */ function get_ip_place ...

  3. 淘宝接口 TopAPi

    演示一下调用淘宝的接口,让大家心里有个数, 很简单,新建一个工程,拖一个IDHttp,Button和Memo到窗体上去 然后在这个Button的OnClick事件中写入如下代码: [delphi] v ...

  4. 淘宝免费ip地址查询导致服务堵死的坑

    1.业务中因为想根据用户ip来做一些友好的提示,所以在网上找了个免费的ip查询地址 http://ip.taobao.com/service/getIpInfo.php?ip= 虽然说淘宝的这个地址会 ...

  5. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  6. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  7. JAVA联调接口跨域解决办法

    JAVA联调接口跨域解决办法 第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...

  8. PHP学习笔记13淘宝接口开发一例(tmall.items.discount.search),PHP

    程序设计,因为接口是有请求次数限制的,正式接口也只有2W次每天的请求次数,所以我们需要把从接口返回的数据缓存起来. 采用的接口是http://api.taobao.com/apidoc/api.htm ...

  9. [Elasticsearch] 多字段搜索 (六) - 自定义_all字段,跨域查询及精确值字段

    自定义_all字段 在元数据:_all字段中,我们解释了特殊的_all字段会将其它所有字段中的值作为一个大字符串进行索引.尽管将所有字段的值作为一个字段进行索引并不是非常灵活.如果有一个自定义的_al ...

随机推荐

  1. [转]SQL 操作结果集 -并集、差集、交集、结果集排序

    本文转自:http://www.cnblogs.com/kissdodog/archive/2013/06/24/3152743.html 操作结果集 为了配合测试,特地建了两个表,并且添加了一些测试 ...

  2. git 添加远程仓库遇到的问题

    上午在学习廖雪峰老师的 git 教程(http://www.liaoxuefeng.com/),在添加远程仓库这一节中遇到了两个问题: 问题描述: 一.关联自己的远程仓库. fatal: Not a ...

  3. mysql中char与varchar的区别分析

    char 固定长度,所以在处理速度上要比varchar快速很多,但是对费存储空间,所以对存储不大,但在速度上有要求的可以使用char类型,反之可以用varchar类型来实例 建意: myisam 存储 ...

  4. 转:大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  5. single单例模式

    单例模式:多用于数据库连接,保证数据库只连接一次,避免重复连接.因为多次打开服务器会造成服务器负担,运行速度会减慢. 以下是一个连接数据库的单例模式: <?php class db_mysql{ ...

  6. 兼容IE678的placeholder

    jquery-placeholder.js是基于jquery的插件,对不支持placeholder的浏览器有非常好的兼容性,只需引入这个js文件,然后给所有Input元素调用一下placeholder ...

  7. java多线程系类:基础篇:01基本概念:

    这个系类的内容全部来源于http://www.cnblogs.com/skywang12345/p/3479024.html.特别在此声明!!! 本来想直接看那位作家的博客的,但还是复制过来. 多线程 ...

  8. [转]Python 命令行参数和getopt模块详解

    FROM : http://www.tuicool.com/articles/jaqQvq 有时候我们需要写一些脚本处理一些任务,这时候往往需要提供一些命令行参数,根据不同参数进行不同的处理,在Pyt ...

  9. perl 下使用非root用户安装模块

    perl下安装模块可以使用cpan命令,但是通常我们不具有root用户权限,所以只能以sudo方式安装模块. 例如需要安装Net::SCP::Expect模块, 执行cpan Net::SCP::Ex ...

  10. 20145221 《信息安全系统设计基础》实验五 简单嵌入式WEB服务器实验

    20145221 <信息安全系统设计基础>实验五 简单嵌入式WEB服务器实验 实验报告 队友博客:20145326蔡馨熠 实验博客:<信息安全系统设计基础>实验五 简单嵌入式W ...