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

revivre

2015-01-24

网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。

实例运行效果：

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>

文章来源：http://www.cnblogs.com/duanhuajian/p/3155080.html

jsonp meta