前言

　　网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。

知识准备

　　上篇博客 : JSON和JSONP （含jQuery实例）（转）  对jsonp已经介绍的很详细了，这里就不多介绍了，直接上实例吧

demo

　　代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<meta name="author" content="@my_coder">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<title> 手机号查询 </title>

<style type="text/css">

html{color:#000;background:#fff;}

body,ul,li,input,h1,button,p{padding:0;margin:0;}

li{list-style:none;}

html{background:#F6F8FC;overflow:hidden;}

.outer{margin:0 auto;width:280px;position:relative;}

h1{font-size:20px;text-align:center;border-bottom:1px dotted #A3C4DB;padding:10px 0;}

p{font-size:14px;padding:14px 0 10px;}

input[type="text"]{width:200px;height:30px;font-size:18px;}

.button{display:inline-block;width:60px;font-size:16px;text-align:center;line-height:34px;background:linear-gradient(#fff,#ccc);border:1px solid #004;border-radius:3px;cursor:pointer;}

ul{padding-top:26px;}

li {font-size:18px;line-height:30px;}

.error{position:absolute;left:4px;top:80px;color:red;font-size:14px;display:none;}

</style>

</head>

<body>

    <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="jquery-1.8.0.min.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>

</body>

</html>

jsonp跨域请求数据实例——手机号码查询的更多相关文章

  1. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

  2. Ajax跨域请求数据实例（JSOPN方式）

    今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...

  3. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...

  4. JSONP 跨域请求 - 获取JSON数据

    如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...

  5. JSONP(跨域请求) —— 一种非官方跨域数据交互协议

    1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数 ...

  6. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  7. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  8. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  9. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

随机推荐

  1. js基础之BOM

    一.window.open 栗子:阿里西西运行代码功能 var oBtn = document.getElementById('btn1'); var oTxt = document.getEleme ...

  2. python多线程与多进程

    由于python的内存回收机制不是线程安全的,所以就有了GIL保证每个进程内,同一时刻最多只有一个线程在运行. 于是,对于python的多线程来讲,其实同一时刻依然只有一个线程在运行.而且由于线程切换 ...

  3. redis2.8--主从机同步流程

  4. [转]source inslght使用指导

    作为一个开放源代码的操作系统,Linux附带的源代码库使得广大爱好者有了一个广泛学习.深入钻研的机会,特别是Linux内核的组织极为复杂,同时,又不能像windows平台的程序一样,可以使用集成开发环 ...

  5. T420修改wifi灯闪动模式

    给T420新装了centos7发现默认的配置wifi灯是工作时闪动的,有点晃眼,想改成简单的on 的时候常亮,off的时候常暗的模式 添加配置文件: vi /etc/modprobe.d/wlanle ...

  6. [转]android Intent机制详解

    转自:http://blog.csdn.net/t12x3456/article/details/7688154 1.什么是Intent Intent是一种运行时绑定(run-time binding ...

  7. Block编程值得注意的那些事儿

    [深入浅出Cocoa]Block编程值得注意的那些事儿   [深入浅出Cocoa]Block编程值得注意的那些事儿 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循 ...

  8. C#基础--面向过程计算器

    //面向过程计算器 //思路: 需要注意的是: 两个数相除 除数不能为0: //1.提示用户输入 //2.进行运算 //3.得到结果 Console.WriteLine("请输入第一个数字: ...

  9. Security Checklist （路由器安全checklist）

    Security Checklist Website by     Michael Horowitz  Home | Introduction | Router Bugs | Security Che ...

  10. BW增强数据源的两种方法

    BW增强数据源的两种方法 2009-04-01, by SAPBI 前言:我们经常会遇到系统标准的数据源,或者我们自建的数据源无法满足要求的情况,这个时候在数据源中添加几个相关的字段,可能就能满足我们 ...