Introduction
In this article I will explain how to access the current user's details. We can get userip, usercountry, usercity, userregion, userlatitude, userlongitude and usertimezone about the user. The "smart-ip.net" JSON string is used to access all the information about the user.
Complete Program
User_Infromation.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">
var userip, usercountry, usercity, userregion, userlatitude, userlongitude, usertimezone
function UserInfo(data)
{
userip = data.host;
usercountry = data.countryName;
usercity = data.city;
userregion = data.region;
userlatitude = data.latitude;
userlongitude = data.longitude;
usertimezone = data.timezone;
}
$(function ()
{
UserInfoDetail();
})
function UserInfoDetail() {
document.getElementById('userip').innerHTML = userip;
document.getElementById('city').innerHTML = usercity;
document.getElementById('country').innerHTML = usercountry;
document.getElementById('region').innerHTML = userregion;
document.getElementById('timezone').innerHTML = usertimezone;
document.getElementById('longitude').innerHTML = userlongitude;
document.getElementById('latitude').innerHTML = userlatitude;
}
</script>
<script type="text/javascript" src="http://smart-ip.net/geoip-json?callback=UserInfo"></script>
</head>
<body>
<div>
<table id="Details" cellpadding="2" cellspacing="2" style=" border:1px solid #000; font-family:'Segoe UI';" >
<tr style="background-color:#666666; color:White; font-weight:bold">
<td colspan="2" align="center">Current User Details in JavaScript</td>
</tr>
<tr style="border:solid 1px #000000">
<td align="left"><b>IP Address :</b></td>
<td><label id="userip"/></td>
</tr>
<tr>
<td align="left"><b>City :</b></td>
<td><label id="city"/></td>
</tr>
<tr>
<td align="left"><b>Country :</b></td>
<td><label id="country"/></td>
</tr>
<tr>
<td align="left"><b>Region :</b></td>
<td><label id="region"/></td>
</tr>
<tr>
<td align="left"><b>Time Zone :</b></td>
<td><label id="timezone"/></td>
</tr>
<tr>
<td align="left"><b>Longitude :</b></td>
<td><label id="longitude"/></td>
</tr>
<tr>
<td align="left"><b>latitude :</b></td>
<td><label id="latitude"/></td>
</tr>
</table>
</div>
</body>
</html>
Output
For more information, download the attached sample application.