jsonp.js/html  主要是利用jquery ajax和jsonp的datatype 跨站点请求数据，记录~

同源策略：同端口，同协议，同域；所以ajax不能支持跨域取得数据，解决方案一般是jsonp但是它只支持get请求；诸如window.name,CORS;
   Html5中还有window.postMessage();都是解决方案

 var tel;

     var ajax=function(){

         $.ajax({

              type: "get",

              url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel,

              dataType: "jsonp",  //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');

                 }

             }

         }

     });
 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8" />

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

 <title> 查询 </title>

 <script type="text/javascript" src="http://files.cnblogs.com/BeginMan/jquery-1.8.3.min.js" ></script>

 <script type="text/javascript" src="jsonp.js"</script>

 </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>

 </body>

 </html>

jquery ajax跨域取数据的更多相关文章

  1. JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

    JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...

  2. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  3. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  4. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  5. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  6. jquery+ajax跨域请求webservice

    最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...

  7. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  8. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

  9. jquery ajax跨域的完美解决方法(jsonp方式)

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码     今天在项目中需要做远程数据加载 ...

随机推荐

  1. （转载）Flash Number 数据类型

    (转载)http://www.g168.net/txt/flash/learningactionscript/00001183.html Number 数据类型 Number 数据类型是双精度浮点数. ...

  2. Normal Vector Using WorldInverseTranspose

    shader里面经常看到normal向量是用WorldInverseTranspose矩阵做变换的,有时候也可以用WorldMatrix变换. 原理: If your object is only e ...

  3. C++中虚函数实现原理揭秘

            编译器到底做了什么实现的虚函数的晚绑定呢?我们来探个究竟.      编译器对每个包含虚函数的类创建一个表(称为V TA B L E).在V TA B L E中,编译器放置特定类的虚函 ...

  4. div border-radius

    可以画个1/4之一的圆也可以画整个圆 <html> <style type="text/css"> div{ background-color: #000; ...

  5. Lesson: Introduction to JAXP

    The Java API for XML Processing (JAXP) is for processing XML data using applications written in the ...

  6. hdoj 2063 过山车【匈牙利算法+邻接矩阵or邻接表】

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  7. Android4.0 以后不允许在主线程进行网络连接

    Android4.0 以后不允许在主线程进行网络连接,否则会出现 android.os.NetworkOnMainThreadException.因此,必须另起一个线程进行网络连接方面的操作. pac ...

  8. 【Struts2+Spring3+Hibernate3】SSH框架整合实现CRUD_1.3

    作者: hzboy192@192.com Blog: http://my.csdn.net/peng_hao1988 版本总览:http://blog.csdn.net/peng_hao1988/ar ...

  9. 【设计模式 - 24】之访问者模式（Visitor）

    1      模式简介 访问者模式的定义: 访问者模式将数据结构与数据操作进行了分离,解决了稳定的数据结构和易变的数据操作的耦合问题. 访问者模式的优点: 1)        符合单一职责原则: 2) ...

  10. Unity3D延迟回调的封装

    最近,整理项目框架逻辑时,无意中翻到n年前封装的延迟回调管理器,就拎出来说道说道: 先说一下系统提供的几种常用的延迟回调方式: 1)Invoke(Invoke.CancelInvoke):首先需要继承 ...