jsonp跨域请求数据实例—

前言

　　网上有很多开放的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跨域请求数据实例——手机号码查询相关推荐

JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
Jsonp 跨域请求实例
Jsonp 跨域请求实例关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求一.同源策略要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
$.ajax跨域请求数据的解决方案
最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的 ...
.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
AJAX跨域请求数据原理与案例
1.如何通过AJAX跨域请求数据 AJAX通过jsonp来实现跨域请求数据,通过设置dataType(jquery)为jsonp即可. 2.AJAX如何通过jsonp实现跨域(来源于其他网站资料) J ...
原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...

jsonp跨域请求数据实例——手机号码查询

jsonp跨域请求数据实例——手机号码查询相关推荐

最新文章

热门文章