【前端探索】本地IP查询

前言

借用大牛的话,有时候我们前端需要获取到用户的所在地,虽然这种需求很少,但在某些情况下还是有用的,比如这种场景:在用户注册或者修改个人资料的时候,有个地址表单需要填写,那么这种情况下我们就可以通过用户的IP地址来确定用户所在地,动态的更改地址表单,这样可以简化用户的操作,从某种程度上来说也算是提升用户体验。

接口

现在网上有很查询IP信息的接口,百度一下“IP”就会蹦出好多出来,这里我们使用的是搜狐IP地址查询接口,点开就可以看到相关信息
默认GBK格式:http://pv.sohu.com/cityjson

UTF-8格式:http://pv.sohu.com/cityjson?ie=utf-8

那么我们就可以在js中调用这个接口来对获取的数据进行处理

1
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

从上面的信息可以看出返回的是一个名为returnCitySN的对象,则IP和城市则可以通过returnCitySN.cipreturnCitySN.cname得到。

页面

查询页面

先简单地写个了查询页面,如下:

其实已经直接显示出来IP信息了,这里为了测试一下昨天写的一个二维码程序,就特意加了个扫描二维码,可以显示扫描设备的IP信息,页面代码很简单,但是自己之前从来没写过什么比较“规范美观”的HTML页面,下面的代码就将就一下吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<title >IP地址查询</title>
<meta charset="utf-8">
<meta property="og:author" content="RookieHacker:John" />
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
<h1 class="center"><center>IP地址查询</center></h2>
<div class="form-group row">
<center for="url" class="col-xs-offset-3 col-xs-2 col-form-label form-label" >你的IP是:
<script type="text/javascript">
document.write(returnCitySN.cip);
</script>
</center>
</div>
<div class="form-group row">
<center for="url" class="col-xs-offset-3 col-xs-2 col-form-label form-label" >你目前在:
<script type="text/javascript">
document.write(returnCitySN.cname);
</script>
</center>
</div>
<a target="_blank"><center><img class="home-banner-img" src="http://ojzr7go2m.bkt.clouddn.com/blog/20170612/121514534.png" alt="" ></center></a>
<a target="_blank"><center>扫一扫查询你的IP</center></a>
</body>
</html>

二维码页面

这里为了说一下这个二维码才加的这个页面,相当于上面页面的精简版。。。。

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<meta charset="utf-8">
<meta property="og:author" content="RookieHacker:John" />
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
<script>alert("你的IP是:" + returnCitySN.cip + "\n你目前在:" + returnCitySN.cname);</script>
</body>
</html>

这样页面就OK了,下面要扯一下这个二维码了。。。。。有时间再写一下这个应用的细节。

二维码

上传页面

这里我为了省事,直接把上面二维码页面传到了博客上,放在了gitpage。查询页面也放在了博客里,地址在这里【二维码】 【查询页面

生成二维码

操作如图:

然后将生成的二维码直接上传到图床,生成图片链接,加在查询页面就OK了。

测试

效果如下:


这里我手机连着电脑的WiFi,所以信息是一样的,大家有兴趣的也可以测试一下自己的,检查一下是否准确。

感谢

IP地址查询接口


声明:
文章标题:【前端探索】本地IP查询
文章作者:RookieHacker
文章链接:http://rookiehacker.coding.me/blog/2017/06/12/ip-query/
文章版权属本博主所有,有问题或者建议欢迎在下方评论。欢迎转载、引用,但请标明作者和原文地址,谢谢。


喜欢,就支持我一下吧~