如何快速将IP归属地查询API接入到项目当中

前言

在现代网络应用开发中，IP 归属地查询功能为用户提供了极大的便利。本文将向你展示如何将 APISpace 提供的 IP归属地查询 API 快速集成到你的项目中，并在前端展示查询结果。

前端UI代码

首先，我们需要创建一个用户友好的界面，让用户可以输入 IP 地址并查看查询结果。以下是一个简单的 HTML 页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IP归属地查询</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { max-width: 300px; margin: auto; }
        input, button { width: 100%; padding: 10px; margin-bottom: 10px; }
        .result { margin-top: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h2>IP归属地查询</h2>
        <input type="text" id="ipInput" placeholder="输入IP地址" />
        <button onclick="queryIP()">查询</button>
        <div id="result" class="result"></div>
    </div>

    <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

接口请求与结果处理代码

接下来，我们将编写 JavaScript 代码来处理 API 请求和结果展示，这里我使用的接口是 APISpace 的 IP归属地查询API。请将以下代码保存为script.js文件，并确保它与HTML文件位于同一目录下。

// script.js
function queryIP() {
    var ip = document.getElementById('ipInput').value;
    if (ip) {
        // 发送API请求
        fetch('https://eolink.o.apispace.com/ipguishu/ip/geo/v1/district', {
            method: 'GET',
            headers: {
                'X-APISpace-Token': '你的API密钥' // 替换为你的API密钥，登录APISpace即可获取
            },
            params: {
                ip: ip
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.code === "Success") {
                // 显示查询结果
                displayResult(data.data);
            } else {
                // 显示错误信息
                alert('查询失败: ' + data.msg);
            }
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
            alert('查询失败: ' + error.message);
        });
    } else {
        alert('请输入IP地址！');
    }
}

function displayResult(data) {
    var resultDiv = document.getElementById('result');
    resultDiv.innerHTML = `
        <p>大洲: ${data.continent}</p>
        <p>国家: ${data.country}</p>
        <p>省份: ${data.prov}</p>
        <p>城市: ${data.city}</p>
        <p>区县: ${data.district}</p>
        <p>邮政编码: ${data.zipcode}</p>
        <p>时区: ${data.timezone}</p>
        <p>查询精度: ${data.accuracy}</p>
        <p>所属机构: ${data.owner}</p>
        <p>运营商: ${data.isp}</p>
        <p>采集方式: ${data.source}</p>
        <p>国家编码: ${data.areacode}</p>
        <p>行政编码: ${data.adcode}</p>
        <p>自治域编码: ${data.asnumber}</p>
        <p>维度: ${data.lat}</p>
        <p>经度: ${data.lng}</p>
        <p>定位半径: ${data.radius}</p>
    `;
}

请确保在实际部署时替换'你的API密钥'为你从 APISpace 获取的实际 API 密钥。

测试和部署

在本地环境中打开HTML文件，输入IP地址，点击查询按钮，你将看到查询结果展示在页面上。测试无误后，你可以将这个应用部署到任何静态网页托管服务上，如GitHub Pages。

最后我们还上线了一个的非常好用的插件，简直是工作提效大帮手 —— Buffup.AI。使用 Buffup Chrome 扩展程序，您可以轻松地将 ChatGPT 和其他 AI 功能集成到您的日常任务中-无论是搜索Web、发送电子邮件、增强写作还是翻译文本。感兴趣的同学快去 Chrome 插件商店搜索添加使用起来吧~