前言

　　网上有很多开放的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. WEBService动态调用代码

    BasicHttpBinding bind = new BasicHttpBinding(); bind.MaxReceivedMessageSize = int.MaxValue; Endpoint ...

  2. hdu 4602 Partition

    http://acm.hdu.edu.cn/showproblem.php?pid=4602 输入 n 和 k 首先 f(n)中k的个数 等于 f(n-1) 中 k-1的个数 最终等于 f(n-k+1 ...

  3. C++之函数fgetc和fputc、fgets和fputs、fread和fwrite、fscanf和fprintf用法小结

    #include <iostream> #include <cstdio> #include <cstdlib> using namespace std; int ...

  4. 中国广核集团：BPM与ERP紧密结合

    全球能源消耗不断增长,电能已经达到了无可替代的位置.同时,传统的电力供应模式正在受新模式的影响,营造更具价值的生态系统.面对挑战,核电企业在提高能效并降低成本的同时,也迫切需要进行转型.面对公众对可再 ...

  5. DotNetBar v12.2.0.7 Fully Cracked

    PS: 博客园的程序出现问题,导致我的博客不能访问(转到登录页),而我自己由于 Cookies 问题,一直可以访问,所以一直未发现该问题. 感谢冰河之刃告知,thx! 更新信息: http://www ...

  6. java基础之hashmap

    Hashmap是一种非常常用的.应用广泛的数据类型,最近研究到相关的内容,就正好复习一下.网上关于hashmap的文章很多,但到底是自己学习的总结,就发出来跟大家一起分享,一起讨论. 1.hashma ...

  7. ODI 12c 安装

    软件下载地址: http://www.oracle.com/technetwork/middleware/data-integrator/downloads/index.html 下载这个版本: Or ...

  8. javascript笔记5-BOM

    Javascript应用的平台很多,不仅仅针对Web.在Web中使用Javascript,BOM(browser object model,浏览器对象模型)是核心. BOM提供了很多对象,用于访问浏览 ...

  9. zf2-tutorial调通，坑爹的init_autoloader.php

    zf2-tutorial的作者把init_autoloader.php内容写错了,新建个工程,把其中的这个文件的内容替一下,然后建库/建表,把local.ini打开(不是必须的),用户名/口令等配好, ...

  10. iOS 从相机或相册获取图片并裁剪

    今天遇到一个用户头像上传的问题,需要从相册或者相机中读取图片.代码很简单,抽取关键部分,如下: //load user image - (void)UesrImageClicked { UIActio ...