jsonp跨域请求数据实例—手机号码查询
只争朝夕 2015-01-24
网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。
实例运行效果：
源代码：
<!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.3.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> 
相关推荐
adonislu 0喜欢 / 0评论 2019-09-08
adonislu 0喜欢 / 0评论 2013-12-11
疯狂的扣子 0喜欢 / 0评论 2017-06-21
遥望 0喜欢 / 0评论 2019-06-28
austindev 0喜欢 / 0评论 2016-05-28
zijinmu 0喜欢 / 0评论 2019-06-27
liuyongfang0 0喜欢 / 0评论 2015-05-03
Anything 0喜欢 / 0评论 2014-09-03
83453065 0喜欢 / 0评论 2014-06-06
只争朝夕 0喜欢 / 0评论 2014-03-09
dalong 0喜欢 / 0评论 2014-02-27
疯狂的扣子 0喜欢 / 0评论 2014-01-24
Dolphinsz 0喜欢 / 0评论 2013-08-14
欧阳凯少 0喜欢 / 0评论 2013-06-14
张树刚 0喜欢 / 0评论 2019-06-20
yigeng 0喜欢 / 0评论 2012-08-31
sjunothing 0喜欢 / 0评论 2012-08-14
疯狂的扣子 0喜欢 / 0评论 2012-04-02
promiseLOVE 0喜欢 / 0评论 2017-07-13
漂流 0喜欢 / 0评论 2016-05-03
文明 0喜欢 / 0评论 2019-04-26
舜岳 0喜欢 / 0评论 2011-06-27
zndy0 0喜欢 / 0评论 2017-11-29
水滴石穿 0喜欢 / 0评论 2019-04-04
前端开发探路者 0喜欢 / 0评论 2016-09-14