手机号码归属地查询JS跨域

效果图

代码

css代码

body {font-family: 'Microsoft YaHei';
}.wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: #fff;}.search_form {width: 640px;margin: 100px auto 0;
}.logo img {display: block;margin: 0 auto;
}.form_group {width: 640px;height: 40px;margin-top: 45px;
}.input_txt {width: 538px;height: 38px;padding: 0px;float: left;border: 1px solid #41a1cb;outline: none;text-indent: 10px;
}.input_sub {width: 100px;height: 40px;border: 0px;float: left;background-color: #249e1d;color: #fff;font-size: 16px;outline: none;cursor: pointer;position: relative;}.input_sub.loading::before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url('../img/loading.gif');
}.hotkey {margin: 3px 0 0 2px;
}#ddd {color: #666;padding-left: 380px;padding-top: 120px;
}.hotkey a {font-size: 14px;color: #666;padding-left: 380px;padding-top: 120px;}.weather_list {height: 200px;text-align: center;margin-top: 50px;font-size: 0px;
}.weather_list li {display: inline-block;width: 140px;height: 200px;padding: 0 10px;overflow: hidden;position: relative;background: url('../img/line.png') right center no-repeat;background-size: 1px 130px;
}.weather_list li:last-child {background: none;
}.info_date {width: 100%;height: 40px;line-height: 40px;color: #999;font-size: 14px;left: 0px;bottom: 0px;margin-top: 15px;
}.info_date b {float: left;margin-left: 15px;
}.info_type span {color: #fda252;font-size: 30px;line-height: 80px;
}.info_temp {font-size: 14px;color: #fda252;
}.info_temp b {font-size: 13px;
}.tem .iconfont {font-size: 50px;
}body,ul,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;
}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;
}
a{text-decoration:none;
}
ul{list-style:none;
}
img{border:0px;
}/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,.clearfix:after{content:'';display:table;
}
.clearfix:after{clear:both;
}
.clearfix{zoom:1;
}.fl{float:left;
}
.fr{float:right;
}

代码（jQuery发送Ajax请求）

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>手机号码查询</title><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/index.css" /><script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script></head><body><div class="wrap" id="app"><div class="hotkey" style="padding-top: 60px;"><a href="javascript:;" id="ddd" style="font-size: 40px;">手机号码归属地专业在线查询</a><br /><a href="javascript:;">手机号码(段)：</a></div><div class="search_form" style="margin-top: 5px;"><div class="form_group"><input type="text" id="city" name="mycity" value="" class="input_txt" placeholder="请输入手机号码(段)" /><button class="input_sub" id="ffde">查 询</button></div></div><div id="fu" align="center" style="margin-top: 20px;"></div></div></body>
</html>
<script type="text/javascript">$("#ffde").click(function() {var t = /^1[3-9]\d{9}$/;if (t.test($("#city").val())) {$.ajax({type: "GET",url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",data: {tel: $("#city").val()},jsonp: "callback",success: function(res) {var re =`   <table id="t0" border="1px" width="800px" height="350px"><tr><td colspan="2" style="text-align: center;background-color: #F5F5F5;"><font  size="3px">查询结果</font></td></tr><tr><td style="text-align: center;">您查询的手机号码段</td><td style="text-align: center;">${res.mts}</td></tr><tr><td style="text-align: center;">卡号归属地</td><td style="text-align: center;">${res.province}</td></tr><tr><td style="text-align: center;">卡类型</td><td style="text-align: center;">${res.catName}</td></tr><tr><td style="text-align: center;">区号</td><td style="text-align: center;">${res.areaVid}</td></tr><tr><td style="text-align: center;">邮编</td><td style="text-align: center;">${res.ispVid}</td></tr><tr><td colspan="2"  style="text-align: center;" ><font color="#249E1D" size="3px">更多详情的邮编区号</font></td></tr></table>`;fu.innerHTML = re;},dataType: "jsonp"});} else {alert("请输入正确的手机号！！")}});
</script>

手机号码归属地查询JS跨域相关推荐

HTML+JS 实现手机号码归属地查询功能
手机号码归属地 API 是一种提供号码归属地信息的接口,它通过与运营商和电信数据库交互,根据手机号码查询相关归属地信息并返回结果.通过使用手机号码归属地API,开发者可以轻松地集成号码归属地查询功能到 ...
js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...
jsonp-反向代理-CORS解决JS跨域问题的个人总结
jsonp-反向代理-CORS解决JS跨域问题的个人总结网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下. 解决 js 跨域问题一共有8种方法, jsonp(只支持 get) 反向代 ...
C# 自动投票和手机号码归属地查询 - 简单程序源码分享（高手飘过）
C# 自动投票和手机号码归属地查询 - 简单程序源码分享(高手飘过) C# 自动投票和手机号码归属地查询 - 简单程序源码分享(高手飘过) 如有转载,请注明出处: http://www.cnblogs ...
Ajax之手机号码归属地查询
Ajax之手机号码归属地查询 <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
淘淘商城第103讲——js跨域分析
通过前几讲的学习,我有理由相信大家都写完了用户登录这个接口,登录的时候我们把token写入到了Cookie当中,登录成功后,我们查看Cookie的信息,如下图所示,发现是有token信息的. 我们回到 ...
chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持 1.设置 document.domain为一致推荐1 2.Apache 反向代理推荐1 3. ...
window.opener方法的使用 js跨域
2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...

手机号码归属地查询JS跨域

手机号码归属地查询JS跨域

效果图

代码

手机号码归属地查询JS跨域相关推荐

最新文章

热门文章