HTML-jQuery使用阿里云手机归属地api

运行结果:

HTML-jQuery使用阿里云手机归属地api

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//导入jQuery文件
		<script type="text/javascript" src="js/jquery.min.js" ></script>
	</head>
	<body>
		<input type="text" name="tel" id="tel" value="" />
		<input type="button" name="btn" id="btn" value="查询" /><br />
		所属地址:<h1 id='address'></h1>
		运营商:<h1 id='yys'></h1>	
	</body>
	
	<script type="text/javascript">
		$('#btn').click(function(){
		//使用jQuery中的ajax()方法查询
			$.ajax({
				type:'get',// 表示请求的方式
				url:'http://api04.aliyun.venuscn.com/mobile?',  //购买来的api提供的请求地址
				headers:{'Authorization':"APPCODE "+"a72ae75b8be8430b8e37c784fec06***"},   // 设置请求头,字符串为购买后系统给你的授权码
				data:{'mobile':$('#tel').val()},   // 设置请求参数
				success:function(res){  //表示请求成功  res表示响应的数据
					$('#address').html(res.data.city);
					$('#yys').html(res.data.types);
				}
			})
		})

	</script>
</html>