How to get user Public IP Address using Javascript
Do you know how to get the user IP address using javascript? I will show you how.
Today we are going to look up an API that provides the user’s Public IP address. Here I am using jsonip.com  to get the public IP address of user.
We are using the jquery getJSON() function to fetch the data from API.
Step 1 Add Jquery to your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Step 2 Write a Javascript snippet to get IP address
<script type="text/javascript">
$.getJSON("http://jsonip.com", function (data) {
console.log(data.ip);
$(".ipaddress").text(data.ip);
});
</script>
Step 3 Create an element to display the IP
<span class="ipaddress"></span>
So the end result will look like this
The complete source code of IP finder using Javascript
<html lang="en">
<head>
<title>Get IP Address</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Your Current Ip Address : <span class="ipaddress"></span></h1>
<script type="text/javascript">
$.getJSON("http://jsonip.com", function (data) {
console.log(data.ip);
$(".ipaddress").text(data.ip);
});
</script>
</body>
</html>
Hope this helps while creating small applications .
Share with your friends:
Google Auth in android and ios with React native Expo Managed workflow
Hey , Recently i striggled alot to find a way to integrate the google auth with react native expo app. […]
October 3, 2024
Export html table to excel, pdf, csv format using Datatable
Do you know how to export html table to excel, pdf, CSV, or excel format using Datatable? If you don’t […]
August 4, 2022
Instagram Hashtag API PHP and JavaScript Integration with RapidAPI
Do you know how to integrate Instagram Hashtag API with your website? In this tutorial, I will show you how […]
August 2, 2022
How to host React Application into Cpanel – Routes not working Htaccess fix
Do you know how to host react applications into Cpanel? After building your react application. you will get an index.html […]
July 28, 2022
Digital Marketing Toolkit
Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits
Get Free Access Now