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. VS2013项目受源代码管理向源代码管理注册此项目时出错

    在使用TFS的时候有时出现无法加载项目,后来删除项目添加也是不行 编译项目的时候提示如题的错误,用记事本打开出错的几个项目的.csproj文件,把下面几行内容删掉就行了. <SccProject ...

  2. jQuery获取属性之自己遇到的问题

    刚开始是这种写法  用的 attr  结果获取不到 if($("#reg_username_span").attr("display") == 'block') ...

  3. 传输层之TCP

    ---恢复内容开始--- 坞无尘水槛清,相思迢递隔重城. 秋阴不散霜飞晚,留得枯荷听雨声.    --李商隐 上一篇中我们了解了socket编程是基于TCP或者UDP,所以我们有必要对TCP,和UDP ...

  4. SRM 609(1-250pt, 1-500pt)

    嗯....还是应该坚持写题解的好习惯啊... DIV1 250pt 这难度是回到srm 300+的250了嘛...略 // BEGIN CUT HERE /* * Author: plum rain ...

  5. hdoj 1556 Color the ball【线段树区间更新】

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. linux 下信号处理命令trap && linux下各种信号的意义

    1.用途说明 trap是一个shell内建命令,它用来在脚本中指定信号如何处理.比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是退出 ...

  7. LigerUi中的Grid中不分页显示（local）！

    LigerUi中的Grid中不分页显示! grid为local usePager: true,                         //是否分页

  8. JSP_DAO方式实现数据库查询（MyEclipse10,Tomcat7.0,JDK1.7,）——Java Web练习（四）

    1.项目结构: 2.创建数据库.表.插入记录 create database TestDao; use TestDao; create table student( stuid int, userna ...

  9. Yii2 ActiveForm表单自定义样式

    实例: <?php $form = ActiveForm::begin([ 'fieldConfig' => [ 'template' => '<div class=" ...

  10. STL源码剖析之_allocate函数

    SGI STL提供的标准std::allocator中的_allocate函数代码如下: template<class T> inline T* _allocate(ptrdiff_t s ...