前言
在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请求正确无误,并且能够接收到检测结果。