前言
在现代网络应用开发中，IP 归属地查询功能为用户提供了极大的便利。本文将向你展示如何将 APISpace 提供的 IP归属地查询 API 快速集成到你的项目中，并在前端展示查询结果。
前端UI代码
首先，我们需要创建一个用户友好的界面，让用户可以输入 IP 地址并查看查询结果。以下是一个简单的 HTML 页面示例：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>IP归属地查询</title> 6 <style> 7 body { font-family: Arial, sans-serif; } 8 .container { max-width: 300px; margin: auto; } 9 input, button { width: 100%; padding: 10px; margin-bottom: 10px; } 10 .result { margin-top: 20px; } 11 </style> 12</head> 13<body> 14 <div class="container"> 15 <h2>IP归属地查询</h2> 16 <input type="text" id="ipInput" placeholder="输入IP地址" /> 17 <button onclick="queryIP()">查询</button> 18 <div id="result" class="result"></div> 19 </div> 20 21 <script src="script.js"></script> <!-- 引入JavaScript文件 --> 22</body> 23</html>
接口请求与结果处理代码
接下来，我们将编写 JavaScript 代码来处理 API 请求和结果展示，这里我使用的接口是 APISpace 的 IP归属地查询API。请将以下代码保存为script.js文件，并确保它与HTML文件位于同一目录下。
1// script.js 2function queryIP() { 3 var ip = document.getElementById('ipInput').value; 4 if (ip) { 5 // 发送API请求 6 fetch('https://eolink.o.apispace.com/ipguishu/ip/geo/v1/district', { 7 method: 'GET', 8 headers: { 9 'X-APISpace-Token': '你的API密钥' // 替换为你的API密钥，登录APISpace即可获取 10 }, 11 params: { 12 ip: ip 13 } 14 }) 15 .then(response => { 16 if (!response.ok) { 17 throw new Error('Network response was not ok'); 18 } 19 return response.json(); 20 }) 21 .then(data => { 22 if (data.code === "Success") { 23 // 显示查询结果 24 displayResult(data.data); 25 } else { 26 // 显示错误信息 27 alert('查询失败: ' + data.msg); 28 } 29 }) 30 .catch(error => { 31 console.error('There has been a problem with your fetch operation:', error); 32 alert('查询失败: ' + error.message); 33 }); 34 } else { 35 alert('请输入IP地址！'); 36 } 37} 38 39function displayResult(data) { 40 var resultDiv = document.getElementById('result'); 41 resultDiv.innerHTML = ` 42 <p>大洲: ${data.continent}</p> 43 <p>国家: ${data.country}</p> 44 <p>省份: ${data.prov}</p> 45 <p>城市: ${data.city}</p> 46 <p>区县: ${data.district}</p> 47 <p>邮政编码: ${data.zipcode}</p> 48 <p>时区: ${data.timezone}</p> 49 <p>查询精度: ${data.accuracy}</p> 50 <p>所属机构: ${data.owner}</p> 51 <p>运营商: ${data.isp}</p> 52 <p>采集方式: ${data.source}</p> 53 <p>国家编码: ${data.areacode}</p> 54 <p>行政编码: ${data.adcode}</p> 55 <p>自治域编码: ${data.asnumber}</p> 56 <p>维度: ${data.lat}</p> 57 <p>经度: ${data.lng}</p> 58 <p>定位半径: ${data.radius}</p> 59 `; 60}
请确保在实际部署时替换'你的API密钥'为你从 APISpace 获取的实际 API 密钥。
测试和部署
在本地环境中打开HTML文件，输入IP地址，点击查询按钮，你将看到查询结果展示在页面上。测试无误后，你可以将这个应用部署到任何静态网页托管服务上，如GitHub Pages。
最后我们还上线了一个的非常好用的插件，简直是工作提效大帮手 —— Buffup.AI。使用 Buffup Chrome 扩展程序，您可以轻松地将 ChatGPT 和其他 AI 功能集成到您的日常任务中-无论是搜索Web、发送电子邮件、增强写作还是翻译文本。感兴趣的同学快去 Chrome 插件商店搜索添加使用起来吧~
结语
通过以上步骤，你已经成功地将IP归属地查询API集成到你的项目中，并在前端展示了查询结果。这个简单的集成过程可以帮助你快速地为你的应用添加地理位置功能。记得在实际部署时，将API密钥保密，避免泄露。