利用js获取客户端ip的方法

获取ip有两种方式,下面分别对每种方法进行研究。

1. 通过script标签引入url

比如如下代码:

<scripttype="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
<scripttype="text/javascript">  
	alert(returnCitySN.cip)  
</script>

访问链接 http://pv.sohu.com/cityjson?ie=utf-8 ,我们可以看到网页返回的是一段语句:

var returnCitySN = {"cip": "192.168.1.1", "cid": "CN", "cname": "CHINA"};

所以第一段js代码就相当于

<script type="text/javascript">
	var returnCitySN = {"cip": "192.168.1.1", "cid": "CN", "cname": "CHINA"};
</script>

所以我们在后面就可以访问这个json变量并读取它的数据了。

也有的网站服务提供回调函数的,比如http://freegeoip.net。这个网站支持json,xml,csv,jsonp格式。我们可以将上面的url换成http://freegeoip.net/json/?callback=foo

<scripttype="text/javascript" src="http://freegeoip.net/json/?callback=foo"></script>  
<scripttype="text/javascript">  
	function foo(json){
      alert(json.ip); // alerts the ip address
    }  
</script>

这个网址和上面的不同,返回的是jsonp,所以我们可以直接使用函数foo,这个名字可以自定义。上面的代码相当于

<scripttype="text/javascript">
foo({"ip":"192.168.1.1"});
</script>  
<scripttype="text/javascript">  
	function foo(json){
      alert(json.ip); // alerts the ip address
    }  
</script>

如果把callback函数去掉,譬如http://freegeoip.net/json/,返回的就只有json数据了,但是这个json数据因为没有变量名,不好调用,我们就要用其他的方法来调用这个json数据了。

2. ajax调用

如果该url返回的是json格式的数据,要想调用,就需要用到ajax。

<script >
   	$.getJSON('//freegeoip.net/json/', function(data) {
	 	console.log(JSON.stringify(data, null, 2));
	});
</script>

以上的代码其实是简写的ajax,写成ajax:

$.ajax({
	url: 'http://freegeoip.net/json/',
	success: function(data){
  	   console.log(JSON.stringify(data));
	},
	type: 'GET',
	dataType: 'JSON'
});

值得一提的是当dataType和type的选择会影响能不能从服务器返回数据。比如当dataType为json,type为post,则freegeoip不能返回数据。别的服务器比如//gd.geobytes.com/GetCityDetails则是当dataType为json的时候都不能返回。这个应该和服务的后台支持有关系。
还有一些东西,比如//gd.geobytes.com/GetCityDetails如果不加?callback=? getJson就返回不了东西,这些都是服务器支持的问题,就不研究了。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值