前言

　　网上有很多开放的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. 如何在 Linux 中整理磁盘碎片

    有一个神话是 linux 的磁盘从来不需要整理碎片.在大多数情况下这是真的,大多数因为是使用的是优秀的日志文件系统(ext3.4等等)来处理文件系统.然而,在一些特殊情况下,碎片仍旧会产生.如果正巧发 ...

  2. redis sort

    redis sort命令用法 1.命令描述返回或保存给定列表.集合.有序集合key中经过排序的元素.排序默认以数字作为对象,值被解释为双精度浮点数,然后进行比较. 2.一般sort用法最简单的sort ...

  3. cordova 5.0 白名单

    最新的cordova 5.0 更新了白名单机制,增强了安全性,但是也给我们在开发中带来了很多问题: 当你引入谷歌.百度地图时,会出现 Failed to load resource -- 解决办法: ...

  4. bitmap格式分析

    位图(Bitmap)当然是最简单的,它Windows显示图片的基本格式,其文件扩展名为*.BMP.在Windows下,任何各式的图片文件(包括视频播放)都要转化为位图个时候才能显示出来,各种格式的图片 ...

  5. powershell ise好字库和diy配色文件分享

    Windows PowerShell ISE (集成脚本环境) 是 Win中自带的脚本编写工具. 在 Windows PowerShell ISE 中,可以在单个基于 Windows 的图形用户界面中 ...

  6. DotNetBar v12.1.0.0 Fully Cracked

    更新信息: http://www.devcomponents.com/customeronly/releasenotes.asp?p=dnbwf&v=12.1.0.0 如果遇到破解问题可以与我 ...

  7. maven的入门hello world

    编写pom pom.xml是maven的核心.Project Object Model,定义了项目的基本信息,用于描述项目如何构建,项目依赖等. 首先,新建hello-world文件夹,新建pom.x ...

  8. Microsoft Visual Studio Ultimate 2013 with Update 3 CN+EN

    官方90天试用版. Microsoft Visual Studio Ultimate 2013 with Update 3 - 简体中文DVD5 ISO image (SHA-1: 9A306631A ...

  9. CDH上执行WordCount的意外和收获

    前面将Cloudera Manager安装到集群上的一台主机后,并通过Cloudera manager安装了hadoop-2.6.0-CDH5.4.4.今日来测试安装的集群是否很够很好的执行mapre ...

  10. 显示pdf

    document.all[document.all.PDFNotKnown ? "IfNoAcrobat" : "IfAcrobat"].style.displ ...