实现手机归属地查询页面

看图！！！

页面的实现：

使用Ajax异步请求向服务器发送请求，请求手机号归属地查询，然后动态生成列表，显示手机号码段，卡号归属地，卡的类型等信息，代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#myh3{margin-left: 300px;}#mydiv{margin-left: 400px;}#table{margin-top: 50px;width: 800px;height: 50px;text-align: center;}.tr{width: 400px;}.t1{width: 800px;}#aaa{width: 400px;height: 30px;}#bbb{width: 100px;height: 30px;}</style></head><body><h1 align="center">手机号码归属地专业在线查询</h1><h3 id="myh3">手机号码(段):</h3><div id="mydiv"><input type="text" name="" id="aaa" value="" placeholder="请输入手机号码(段)" id="myin"/><button type="button" id="bbb">查询</button></div><div id="list"></div></body><script type="text/javascript">$('button').click(function() {var value=$('input').val();//发送JSONP请求$.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', //回调函数名，是Jquery随机生成，当然你可以指定回调函数名//jsonpCallback:'getJsonData', 自己指定回调函数名 dataType:"jsonp"})})function showData(telNumber,city,phoneCardType,periorNumbers,areaVid){$('#list').append('<table id="table" align="center" border="1px" cellspacing="0px" cellpadding="0px"><tr class="t1"><td colspan="2">查询结果</td></tr><tr ><td class="tr">您查询的手机号码段</td><td id="td1"></td></tr><tr ><td class="tr">卡号归属地</td><td id="td2"></td></tr><tr ><td class="tr">卡类型</td><td id="td3"></td></tr><tr ><td class="tr">手机号前六位</td><td id="td4"></td></tr><tr ><td class="tr">areaVid</td><td id="td5"></td></tr><tr class="t1"><td colspan="2" >更多详情的邮编区号</td></tr></table>');$('#td1').append('<span>'+telNumber+'</span>');$('#td2').append('<span>'+city+'</span>');$('#td3').append('<span>'+phoneCardType+'</span>');$('#td4').append('<span>'+periorNumbers+'</span>');$('#td5').append('<span>'+areaVid+'</span>');}</script></html>

实现手机归属地查询页面相关推荐

JavaScript学习：利用第三方接口做手机归属地查询
逆战学习整理一下关于怎么获取接口数据,然后渲染数据到页面上第三方接口地址:手机归属地查询一.思路和大致需要用到的知识点 1.body标签里准备一个input和button,用一个盒子包起来,一个 ...
Android手机归属地查询工具
在Android应用开发中,经常需要与网络上的服务端的程序(J2EE或者.NET等应用)进行通信.交互.例如"优酷.土豆"的android客户端,每天访问都会有最新的视频资讯,那些 ...
使用jQuery的ajax的方法完成一个手机归属地查询
使用jQuery的ajax的方法完成一个手机归属地查询 1.设计页面的效果: 2. 选用HTTP GET方法,将电话提交到服务端,并将返回的结果显示在界面相应的位置: 3. 服务端API地址:http ...
[解读小程序]手机归属地查询Demo(四)
[解读小程序]手机归属地查询Demo(四) 分析的程序来源: http://blog.csdn.net/y1258429182/article/details/52666290 下载链接:http:/ ...
微信小程序手机归属地查询功能实现
这几天总是在忙,终于抽空来研究一下微信小程序,大概看了一下API,最终实现了闪屏页动画+登录验证+Toast提示+Tab页面+手机归属地查询. 最终实现的功能这里我就不讲解了,因为太基础了,最好是 ...
wp7 手机归属地查询
ps:之前一直看卤面网,看博客园里强人关于wp7开发介绍等也快大半个月了,不得不说实践是检验真理的唯一标准,还得自己动手做,这个是我做的第一个wp7小程序:手机归属地查询.不废话,先上图: 此应用拥有 ...
HTML5第9节课堂笔记（初探mui，制作手机归属地查询）
手机MUI程序 ,利用它的ajax方法访问baidu的API http://apistore.baidu.com/apiworks/servicedetail/794.html http://dev. ...
J2ME:手机归属地查询软件
最近在网上下载了一个"猫头鹰"手机归属地查询软件,界面太繁杂,看着很不爽,于是自己也做了一个.速度也有明显的改进: 原版的软件一次读取整个文件,我这个一次只读取一组,比较完后再读取 ...
php实现手机归属地的查询、,PHP实现手机归属地查询API接口实现代码
我们经常会开发一些行业分类的网站,这个时候我们需要显示手机归属这个功能,这个时候我们找了很多API接口的地址,但是都不如人意,那么PHP实现手机归属地查询API接口实现代码,大家清楚吗?一起去看看爱站 ...

实现手机归属地查询页面

实现手机归属地查询页面

实现手机归属地查询页面相关推荐

最新文章

热门文章