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. Muduo-Base-Exception(未完待续)

    Exception类 主要功能: 能够对异常信息进行输出 能够输出调用的关系 方便我们对某些信息进行调试 系统调用:#include <execinfo.h>int backtrace(v ...

  2. Android-adb shell 读取手机系统文件

    1.首先保证手机是root 状态 2.运行 adb shell 页面以后 su root 3.ls 就会发现目录结构可以显示了

  3. 数学（容斥计数）：LNOI 2016 方

    Description 上帝说,不要圆,要方,于是便有了这道题.由于我们应该方,而且最好能够尽量方,所以上帝派我们来找正方形 上帝把我们派到了一个有N行M列的方格图上,图上一共有(N+1)×(M+1) ...

  4. python 中 time 模块 格式化 format

    %y 两位数的年份表示(00-99)%Y 四位数的年份表示(000-9999)%m 月份(01-12)%d 月内中的一天(0-31)%H 24小时制小时数(0-23)%I 12小时制小时数(01-12 ...

  5. 如何避免jQuery库和其他库的冲突

    默认情形:jQuery用$作为自身的快捷方式 1. jQuery库在其他库之后导入 (1)方法:使用jQuery.noConflict()函数将变量$的控制权转移给其他库 (2)操作: (a)在js代 ...

  6. 奇怪的JS正则之 /[A-z]/.test("\\"); // true

    本文是在一个国外介绍JS的网站上转载过来的,作者很逗,先是举例JS让人XX的例子,再动手实践发现JS隐藏的黑知识.为什么 /[A-z]/.test("\\"); 是 true ,你 ...

  7. Bzoj 1756: Vijos1083 小白逛公园 线段树

    1756: Vijos1083 小白逛公园 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1021  Solved: 326[Submit][Statu ...

  8. opencv 重用代码块记录

    Created on 2013-8-7URL : http://blog.sina.com.cn/s/blog_a502f1a30101mfj4.html@author: zhxfl 转载请说明出处 ...

  9. C语言求x的y次方，自定义函数，自己的算法

    我是一名高二中学生,初中时接触电脑,非常酷爱电脑技术,自己百度学习了有两年多了,编程语言也零零散散的学习了一点,想在大学学习计算机专业,所以现在准备系统的学习C语言,并在博客中与大家分享我学习中的心得 ...

  10. JAVA网络编程基础知识

    网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输.在TCP/IP协 ...