Get client IP address Information using Jquery Ajax call

Most of the online software providers would like to store the user ip, city, location, country etc information in their database for their feature records. For their convenient, some companies are providing the services to get the ip info (City, location, IP, country, etc…) through web services like xml or in JSON format. Please find the tutorial below to get ip info, city, country, location etc from the below web services providers.

Let’s start our tutorial.

Here I going to use two web services url from two different ip info providers using Jquery JSON Ajax call

Before going to tutorial include the below JS and CSS in DOM to achieve the result

Include 3rd party JavaScript and CSS files

<link rel="stylesheet" type="text/css" href="lib/pretty-json.css" />
<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/js/underscore-min.js"></script>
<script type="text/javascript" src="lib/js/backbone-min.js"></script>
<script type="text/javascript" src="lib/js/pretty-json-min.js"></script>

IP Info provider 1: http://ip-api.com

JSON URL

Below url will provide IP address information from client computer or any devices.

http://ip-api.com/json/

HTML Code

Below html code will display IP address Info JSON response/Data

<div id="ip-api-json-response"></div>

JavaScript Code

Below JavaScript will make Ajax call to Ip Info URL

jQuery(function() {
     $.get("http://ip-api.com/json/", function(response) {
         new PrettyJSON.view.Node({
             el: $("#ip-api-json-response"),
             data: response
         });
     }, "jsonp");
 });

We used Pretty JSON 3rd party plugin to display the responses for user readable format for user experience. Find the screenshot below

IP Info provider 2: http://ipinfo.io

JSON URL

Below url will provide IP address information from client computer or any devices.

http://ipinfo.io

HTML Code

Below html code will display IP address Info JSON response/Data

<div id="ipinfo-json-response"></div>

JavaScript Code

Below JavaScript will make Ajax call to Ip Info URL

jQuery(function() {
     // http://ipinfo.io API
     $.get("http://ipinfo.io", function(response) {
         new PrettyJSON.view.Node({
             el: $("#ipinfo-json-response"),
             data: response
         });
     }, "jsonp");
 });

Pretty JSON is a 3rd party plugin to display the responses for user readable format for user experience.

Download Demo