前言

　　网上有很多开放的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. java之socket

    socket系java中网络编程的内容. 1客户端: package com.wtd.socket; import java.io.BufferedReader; import java.io.IOE ...

  2. GCJ 2015-Qualification-A Standing Ovation 难度:0

    https://code.google.com/codejam/contest/6224486/dashboard#s=p0 肯定把朋友们都设置在第0位,在第i位前面必须至少有i个人鼓掌,所以答案加上 ...

  3. 二模 （13）day1

    第一题: 题目大意: N个发射站排成一排,求每个发射站左右第一个比它高的发射站. N<=1000000 解题过程: 1.前几天做poj的时候刚好在discuss里看到有一个神奇的东东叫单调栈,正 ...

  4. sqlite多表关联update

    sqlite数据库的update多表关联更新语句,和其他数据库有点小不一样 比如:在sql server中: 用table1的 id 和 table2的 pid,关联table1 和 table2 , ...

  5. ARC 类型转换：显式转换 id 和 void *

    http://blog.csdn.net/chinahaerbin/article/details/9471419 /* * ARC有效时三种类型转换: */ 1.__bridge           ...

  6. 端午小长假--前端基础学起来04CSS选择器

    定义: 选择器{ 样式: } 选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素 <head><meta http-equiv="Content-Type" ...

  7. Linux登陆和欢迎信息修改

    edit file: /etc/issue,/etc/motd 这样还改不了,生成的脚本在目录/etc/update-motd.d/中: 假如要打开一个文本文件,可以修改10-help-text: ( ...

  8. .net 小问题集结

    1 .net中新建的项目,调试时,提示"由于未在web.config文件中启用调试,因此无法在调试模式下运行该页.您希望做什么?" 解决办法: 在web.config文件中,将&l ...

  9. 大开眼界 游览Facebook香港办公室

    想加入Facebook 的话不一定要跑去美国,Facebook在香港也开了一个很赞的办公室.除了无敌海景外,更可享用按摩椅.乒乓球桌.跑步机.麻将桌.酒廊.育婴室及开放式厨房.

  10. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...