前言

在Web应用中，空号检测API可以帮助我们识别无效或不活跃的手机号码，从而优化用户数据库。本文将指导你如何在Web页面中接入空号检测API，并实现一个简单的用户界面来展示检测结果。

1. UI设计

首先，我们需要设计一个用户界面，让用户输入手机号码并展示检测结果。

步骤1：创建输入框和按钮

在你的HTML文件中，添加以下代码：

<div class="container">
  <input type="text" id="phoneInput" placeholder="请输入手机号码，多个号码用英文逗号分隔" />
  <button id="checkButton">检测空号</button>
  <div id="result"></div>
</div>

步骤2：添加样式

在CSS文件中，添加输入框、按钮和结果展示的样式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

#phoneInput {
  width: 80%;
  padding: 10px;
  margin-bottom: 20px;
}

#checkButton {
  padding: 10px 20px;
  background-color: #1aad19;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

2. JavaScript实现

下面我使用的是 APISpace 的 空号检测API 进行演示~

步骤1：设置API密钥

在你的JavaScript文件中，设置你的API密钥，登录 APISpace 即可获得你的密钥。

const API_KEY = '你的API密钥';

步骤2：发送空号检测请求

在JavaScript文件中，添加checkNumbers函数，用于发送空号检测请求：

function checkNumbers() {
  const phones = document.getElementById('phoneInput').value.split(','); // 获取用户输入的手机号码数组
  const token = API_KEY; // API密钥，登录APISpace即可获得

  const data = new URLSearchParams();
  data.append('mobiles', phones.join(','));

  fetch('https://eolink.o.apispace.com/konghao/batch-ucheck', {
    method: 'POST',
    headers: {
      'X-APISpace-Token', token,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === "200000") {
      displayResults(data.data);
    } else {
      displayError('检测失败：' + data.message);
    }
  })
  .catch(error => {
    displayError('请求失败：' + error.message);
  });
}

function displayResults(results) {
  const resultContainer = document.getElementById('resultContainer');
  results.forEach(result => {
    const resultElement = document.createElement('div');
    resultElement.className = 'result-item';
    resultElement.innerHTML = `
      <p>手机号：${result.mobile}</p>
      <p>检测结果：${result.status === '1' ? '实号' : '空号'}</p>
      <p>检测时间：${formatTimestamp(result.lastTime)}</p>
      <p>手机号所属区域：${result.area}</p>
      <p>手机号码运营商：${result.numberType}</p>
    `;
    resultContainer.appendChild(resultElement);
  });
}

function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  return date.toLocaleDateString(); // 格式化为年月日
}

function displayError(message) {
  const resultContainer = document.getElementById('resultContainer');
  resultContainer.textContent = message;
}

3. 绑定事件

在JavaScript文件中，为按钮绑定点击事件：

document.getElementById('checkButton').addEventListener('click', checkNumbers);

4. 测试和调试

在浏览器中打开你的HTML文件，测试手机号码输入和空号检测功能。确保API请求正确无误，并且能够接收到检测结果。

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

结语

通过以上步骤，你可以在Web页面中成功接入空号检测API，并为用户提供一个直观的号码检测界面。记得在实际部署前，替换API密钥和其他必要的参数。祝你开发顺利！