JS简单获取客户端IP地址的方法【调用搜狐接口】
获取客户端IP地址是一种常见的需求，而JavaScript作为Web开发的主流语言，有时候需要通过JS获取客户端的IP地址。下面介绍一种简单的方式：调用搜狐接口。
1. 搜狐IP地址接口
搜狐提供了一个IP地址查询接口，可以通过该接口获取到访问者的IP地址和地理位置信息。接口地址为：http://pv.sohu.com/cityjson?ie=utf-8
2. 使用方法
我们可以在前端JavaScript代码中，通过Ajax请求该接口，获取到IP地址信息。具体的代码示例如下：
function getIpAddress(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://pv.sohu.com/cityjson?ie=utf-8', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
var result = xhr.responseText;
var reg = /{.+}/;
var jsonStr = result.match(reg)[0];
var json = JSON.parse(jsonStr);
console.log(json.cip);
}
};
xhr.send();
}
上述代码将通过Ajax请求搜狐的IP地址接口，获取到JSON格式的数据。我们通过正则表达式匹配到JSON字符串，然后将其解析为JSON对象，最后获取到IP地址信息。
3. 示例说明
示例1：在页面上展示IP地址信息
我们可以通过调用上述方法获取到IP地址信息，然后在页面上展示出来。具体的代码示例如下：
<html>
<head>
<title>IP地址查询</title>
<script type="text/javascript">
function getIpAddress(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://pv.sohu.com/cityjson?ie=utf-8', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
var result = xhr.responseText;
var reg = /{.+}/;
var jsonStr = result.match(reg)[0];
var json = JSON.parse(jsonStr);
document.getElementById('ip').innerHTML = json.cip;
}
};
xhr.send();
}
</script>
</head>
<body onload="getIpAddress()">
<h1>您的IP地址是：</h1>
<div id="ip"></div>
</body>
</html>
上述代码将在页面加载时调用getIpAddress方法获取IP地址信息，并将其展示在div中。
示例2：通过Ajax请求发送IP地址信息至服务器
我们可以将上面的方法稍加修改，通过Ajax将IP地址信息发送至服务器，进而完成更多的功能，比如统计访问量等。具体的代码示例如下：
function sendIpAddressToServer(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://pv.sohu.com/cityjson?ie=utf-8', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
var result = xhr.responseText;
var reg = /{.+}/;
var jsonStr = result.match(reg)[0];
var json = JSON.parse(jsonStr);
var formData = new FormData();
formData.append('ip', json.cip);
var request = new XMLHttpRequest();
request.open('POST', '/server_url', true);
request.onload = function(e) {
if (request.readyState === 4) {
if (request.status === 200) {
console.log(request.responseText);
} else {
console.error(request.statusText);
}
}
};
request.onerror = function(e) {
console.error(request.statusText);
};
request.send(formData);
}
};
xhr.send();
}
上述代码将通过Ajax请求搜狐的IP地址接口，将获取到的IP地址用POST方式发送给服务器。服务器端可以接收到IP地址信息，进而实现更多功能。
通过调用搜狐的IP地址接口，我们可以轻松地获取到客户端的IP地址信息。在实际项目中，我们可以通过上述方法，完成更多复杂的功能，比如统计访问量、记录用户行为等。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS简单获取客户端IP地址的方法【调用搜狐接口】 - Python技术站
微信扫一扫 
支付宝扫一扫 