Ajax之手机号码归属地查询

ZJMing_sir

于 2021-03-15 16:06:33 发布

阅读量398

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zjming_sir/article/details/114837638

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Ajax之手机号码归属地查询

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#b {
				font-size: 18px;
				margin-left: -380px;
			}

			#c {
				width: 400px;
				height: 40px;
				margin-top: -150px;
				border: 1px solid burlywood;
			}

			#d {
				width: 80px;
				height: 46px;
				background-color: #4bae4f;
				margin-left: -9px;
				font-size: 15px;
			}

			#e {
				width: 800px;
				height: 300px;
				margin-top: 70px;
				border: 1px solid burlywood;
			}

			#f {
				width: 350px;
			}

			#g {
				width: 350px;
			}

			#h {
				width: 350px;
			}

			#i {
				width: 350px;
			}

			#j {
				width: 350px;
			}
		</style>
	</head>
	<body>
		<div align="center">
			<h2 id="a">手机号码归属地专业在线查询</h1>
				<h4 id="b">手机号码(段):</h4>
				<input type="text" name="" id="c" value="" placeholder="请输入手机号码(段)" />
				<button type="button" id="d">查询</button>
				<table border="1px" cellspacing="0" cellpadding="" id="e">
					<tr>
						<td colspan="2" align="center">查询结果</td>
					</tr>
					<tr>
						<td align="center" id="f">您的手机号码段</td>
						<td id="f1" align="center"></td>
					</tr>
					<tr>
						<td align="center" id="g">卡号归属地</td>
						<td id="g1" align="center"></td>
					</tr>
					<tr>
						<td align="center" id="h">卡类型</td>
						<td id="h1" align="center"></td>
					</tr>
					<tr>
						<td align="center" id="i">区号</td>
						<td id="i1" align="center"></td>
					</tr>
					<tr>
						<td align="center" id="j">邮编</td>
						<td id="j1" align="center"></td>
					</tr>
				
				</table>
		</div>
	</body>

	<script type="text/javascript">
		$('button').click(function() {
			var value = $('input').val();

			//发送Ajax请求
			$.ajax({
				type: 'GET',
				url: 'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm',
				data: {
					tel: value
				},
				success: function(data) {
					var telNumber = data.telString;
					var city = data.province;
					var phoneCardType = data.catName;
					var periorNumbers = data.mts;
					var areaVid = data.areaVid;
					//alert(data.province);

					showData(telNumber, city, phoneCardType, periorNumbers, areaVid);
				},
				jsonp: 'callback',
				dataType: "jsonp"
			})
		})

		function showData(telNumber, city, phoneCardType, periorNumbers, areaVid) {
			$('#f1').append('<span>' + telNumber + '</span>');
			$('#g1').append('<span>' + city + '</span>');
			$('#h1').append('<span>' + phoneCardType + '</span>');
			$('#i1').append('<span>' + periorNumbers + '</span>');
			$('#j1').append('<span>' + areaVid + '</span>');
		}
	</script>
</html>