前言

在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('{
    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金鑰和其他必要的引數。祝你開發順利！

web頁面中接入空號檢測API教程，實現視覺化號碼檢測

前言