How to Get Client IP Address using Javascript?

Admin   HTML5 - CSS   459  2021-03-13 03:20:04

Hi Guys,

Today, I will learn you how to get client machine ip address using javascript code. JavaScript works with third-party applications to fetch the IP addresses. This is the application services that fetch user ip address and simply returns it in three format, plain text, JSON, JSONP format.

Here, In this example, I will give easy and simply to get user/client ip address in javascript. You need to retrieve the client's IP address using JavaScript then you can use bellow example.

Example 1

 

<!DOCTYPE html>

<html>

<head>

<title>how to get client ip address using javascript? - </title>

</head>

<body>

<h1>NiceSnippets.com</h1>

<h3>IP Address of user is:</h3>

<p style="color: red;"><strong id="ip"></strong></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

$.getJSON("https://api.ipify.org?format=json", function(data) {

$("#ip").html(data.ip);

})

</script>

</body>

</html>

Example 2

 

<!DOCTYPE html>

<html>

<head>

<title>how to get client ip address using javascript? - </title>

</head>

<body>

<h1>NiceSnippets.com</h1>

<h3>IP Address of user is:</h3>

<p style="color: red;"><strong id="ip"></strong></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

$.get("https://ipinfo.io", function(response) {

$('#ip').html(response.ip);

}, "json")

</script>

</body>

</html>

Example 3

 

<!DOCTYPE html>

<html>

<head>

<title>how to get client ip address using javascript? - </title>

</head>

<body>

<h1>NiceSnippets.com</h1>

<h3>IP Address of user is:</h3>

<p style="color: red;"><strong id="ip"></strong></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

$.get("http://gd.geobytes.com/GetCityDetails?callback=?", function(response) {

$('#ip').html(response.geobytesipaddress);

}, "json")

</script>

</body>

</html>

It will help you...