JavaScript 用于获取客户端IP地址

JavaScript允许我们获取客户端的IP地址。然后，我们可以进一步使用这些信息获取他们的地理位置，并根据他们的偏好调整内容。

我们可以使用不同的方法来获取客户端的IP地址，比如使用第三方API服务，如ipify或ipapi。在JavaScript中，检索客户端的IP地址对于各种应用程序非常有用，例如跟踪用户位置，基于地理位置个性化内容或实施安全措施。

让我们看一些示例来更好地理解这个概念-

示例1

在这个示例中，为了获取客户端的IP地址，我们将使用第三方API服务（https://www.ipify.org/）。我们将使用$.getJSON()函数发送GET调用到”ipify” API，以获取IP地址信息。IP地址从数据对象中获取，在接收到数据后呈现在段落元素中。

文件名- index.html

<html>
<head>
   <title>JavaScript program to retrieve clients IP address using ipify</title>
</head>
<body>
   <h3>Retrieve Client's IP Address</h3>

   <p id="ipAddress">Your IP address will appear here.</p>

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
       $(document).ready(function() {$ .getJSON("https://api.ipify.org?format=json", async function(data) {
            const res = JSON.stringify(data);
            const ip = JSON.parse(res).ip;
            $("#ipAddress").text("Your IP address is: " + ip);
         });
      });
   </script>
</body>
</html>

输出

结果将如下图所示。

JavaScript 用于获取客户端IP地址

示例2

在这个演示中，客户端的IP地址将通过向”ipapi” API端点（https://ipapi.co/json/）发送一个AJAX请求来获得，请求使用jQuery框架。该API提供了IP地址和地理位置信息。我们将使用$.getJSON()函数向”ipapi” API发起GET请求。在接收到数据后，从数据对象中提取IP地址，并在id为”ipAddress”的段落元素中显示。

文件名 – index.html

<html>
<head>
   <title>JavaScript program to retrieve clients IP address using ipapi</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
   <h3>Retrieve Client's IP Address</h3>

   <p id="ipAddress">Your IP address will appear here.</p>

   <script>
       $(document).ready(function() {$ .getJSON("https://ipapi.co/json/", function(data) {
            $("#ipAddress").text("Your IP address is: " + data.ip);
         });
      });
   </script>
</body>
</html>