2020.9.20手机归属地接口(JQuery)

最新推荐文章于 2024-05-22 16:20:47 发布

有点。

最新推荐文章于 2024-05-22 16:20:47 发布

阅读量168

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_46669997/article/details/108811986

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

手机归属地接口(JQuery)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<title></title>

		<style type="text/css">
			input {
				height: 40px;
				width: 350px;
				margin-top: 80px;
				float: left;
				margin-left: 400px;
			}

			#haoma {
				float: left;
				margin-left: 500px;

				align-items: center;

			}

			#inquire {

				font-size: 40px;
				color: cornflowerblue;
			}

			#search {
				background-color: green;
				font-size: 20px;
				cursor: pointer;
				height: 45px;
				width: 60px;
				float: left;
				margin-top: 80px;
				line-height: 23px;
				box-sizing: border-box;
			}

			#format {

				margin-left: 400px;
				width: 600px;
				height: 300px;
				position: absolute;
				top: 300px;

			}

			.msg {
				font-size: 30px;
				color: aqua;
				background-color: #008000;
			}

			.mm {
				font-size: 40px;
				color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<center>
			<span id="inquire">
				手机号归属地专业在线查询
				<br />
			</span>
			<span id="haoma" style="">
				手机号码段()：

			</span>
			<br />
			<input type="text" name="chaxun" id="query" value="" class="input_phone" placeholder="请输入手机号码" />

			<div id="search" style="line-height: 23px; padding-top: 10px;">搜索</div>
			<div id="">

			</div>
			
		</center>
	</body>
</html>
<script type="text/javascript">
	// 获取手机号
	var n = $("input");
	//键盘事件
	$('body').keypress(function(s) {
		if (s.keyCode == 13) {
			if (!(/^1[3456789]\d{9}$/.test(n.val()))) {
				alert("手机号码有误，请重填")
				return;
			} else {
				showPoint()
			}
		}
	});
	// 鼠标点击
	$('#search').click(function() {
		if (!(/^1[3456789]\d{9}$/.test(n.val()))) {
			alert("手机号码有误，请重填");
			return;
		} else {
			showPoint();
		}

	});
	
	function showPoint() {

		var sol = $('body');
		var s = '';

		$.ajax({
			type: "GET",
			url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
			data: {
				tel: n.val()
			},
			jsonp: "callback", //jsonp 请求 回调函数名Jqurey会自动随机生成
			//jsonpCallback:"getJsonData",可以指定JSONP回调的函数名
			success: function(res) {
				alert(res.catName);
				s =
					`<table border="1" cellspacing="" cellpadding="" id="format">
					<tr class="mm">
						<td colspan="2" align="center">查询结果</td>
					</tr>
					<tr>
						<td class="msg">您查询的手机号码段</td>
						<td class="msg">${res.telString}</td>
					</tr>         
					<tr>           
						<td class="msg">卡号归属地</td>
						<td class="msg">${res.province}</td>
					</tr>          
					<tr>           
						<td class="msg">卡类型</td>
						<td class="msg">${res.carrier}</td>
					</tr>          
					<tr>           
						<td class="msg">区号</td>
						<td class="msg">${res.areaVid}</td>
					</tr>          
					<tr>           
						<td class="msg">邮编 </td>
						<td class="msg">${res.ispVid}</td>
					</tr>
					<tr class="mm">
						<td colspan="2" align="center">更多信息</td>
					</tr>
				</table>`;

				sol.append(s);
			},
			//数据类型为jsonp
			dataType: "jsonp"
		});



	}
</script>

在这里插入图片描述

有点。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2020.9.20手机归属地接口(JQuery)

手机归属地接口(JQuery)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <title></title> <style type="text/css"> in
复制链接

扫一扫