前言

　　网上有很多开放的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]高级运动

    一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... ...

  2. hdu 4612 Warm up

    http://acm.hdu.edu.cn/showproblem.php?pid=4612 将原图进行缩点 变成一个树 树上每条边都是一个桥 然后加一条边要加在树的直径两端才最优 代码: #incl ...

  3. 关于jquery html()方法获取带有OBJECT标签的元素内容时，出现“类型不匹配。”的解决办法

    关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()

  4. JDBC 1

    Java 中的数据存储技术 在Java中,数据库存取技术可分为如下几类: JDBC直接访问数据库 JDO技术 第三方O/R工具,如Hibernate, ibatis 等 JDBC是java访问数据库的 ...

  5. C- printf的使用

    ASC C之后引入的一个特性是,相邻的字符可以被自动连接 /* printf.cc * 2014/09/02 update */ #include <iostream> using nam ...

  6. Matlab与C/C++联合编程之Matlab以MEX方式调用C代码（五）完整过程加示

    如下为本人亲证代码: 一: 编译器的安装与配置(环境不同,显示结果不同) 要使用MATLAB编译器,用户计算机上应用事先安装与MATLAB适配的以下任何一种ANSI C/C++编译器: 5.0.6.0 ...

  7. [C/C++]数据类型与变量

    1.类型: 1.1.简介 1.1.1.基本类型(base type)和复合类型(compound type): 复合类型是指基于其它类型定义的类型.([1].2.3 p45)那么基本类型就是复合类型基 ...

  8. 迭代器（Iterator）模式

    转自:http://blog.csdn.net/lilu_leo/article/details/7609496 概述      迭代器(Iterator)模式,又叫做游标(Cursor)模式.GOF ...

  9. SharePoint表单和工作流 - Nintex篇（三）

    博客地址 http://blog.csdn.net/foxdave 接上篇点击打开链接 跳转到网站设置的Nintex设置,我们来挨个了解一下,这里面一共有15项设置,本篇我们先了解前7个. " ...

  10. ansible quick start

    1. ansible默认开启ControlPersist,也就是持续化ssh的socket连接,以跳过每次task都需要进行主机认证. 2. 但是centos的openssh版本太老了,不支持Cont ...