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. 【Node】package.json

    npm的package.json中文文档https://github.com/ericdum/mujiang.info/issues/6

  2. 非sqlite和nigix的开源c项目

    1.http://code.google.com/p/friso/ 一.friso中文分词器 Friso是使用c语言开发的一款高性能中文分词器,使用流行的mmseg算法实现.完全基于模块化设计和实现, ...

  3. android开发板

    element14-beaglebone-black http://www.embest-tech.cn/shop/star/element14-beaglebone-black-rev-c.html ...

  4. （转载）TRS的WCM6漏洞权限绕过以及绕过密码的登陆方式

    转载于:http://www.2cto.com/Article/201302/191261.html 1.由来:建立在 TRS的WCM6可直接获取管理员密码 漏洞的基础上   2.首先访问wcm目录, ...

  5. 机器学习-review-1 线性回归

    发现隔一段时间,忘记了好多知识点,这里认为重要的知识点记录下来,作为笔记,方便以后回顾. From “李航- 统计学习方法” 统计学习方法的三要素: 模型,策略, 算法 对于线性回归 -------- ...

  6. php非阻塞执行系统命令

    大家都知道php调用系统命令常用的主要有以下几种方法: 如exec(), system(), passthru(), shell_exec() 这几个函数的用法在此不做说明,有需要的请查阅php相关手 ...

  7. 关于css命名规范

    1 newsHeader-logo,第一个单词小写,第二个单词大写,第三个单词加-

  8. HTML5 API 浏览器支持情况检测

    HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...

  9. Conditionals with Omitted Operands (x ? : y)

    Conditionals with Omitted Operands The middle operand in a conditional expression may be omitted. Th ...

  10. [Angular 2] 8. Better ES5 Code

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...