分享给大家一个携号转网和归属地查询接口，数据来自中国联通实时数据哦，非常准确
接口地址 https://www.love1314.xin/code/guishudi/index.php?phone=13771942591
正确的返回
{
"pro": "江苏",
"city": "苏州",
"op": "中国移动",
"isxie": "正常"
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>携号转网和归属地查询</title>
<!-- 国内BootCDN - Bootstrap CSS（稳定可用） -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: "Microsoft YaHei", Arial, sans-serif; /* 适配中文字体 */
background-color: #f8f9fa;
color: #333;
padding: 30px 0;
min-height: 100vh;
}
h1 {
color: #28a745;
margin-bottom: 30px;
font-weight: 600;
}
.query-card {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
margin-bottom: 20px;
}
#result {
margin-top: 20px;
}
.loading {
color: #6c757d;
font-size: 16px;
padding: 20px;
}
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.btn-success {
background-color: #28a745;
border-color: #28a745;
transition: all 0.3s ease;
}
.btn-success:hover {
background-color: #218838;
border-color: #1e7e34;
}
.btn-success:disabled {
background-color: #69c27e;
border-color: #69c27e;
}
</style>
</head>
<body>
<div>
<h1>携号转网和归属地查询</h1>
<!-- 查询表单卡片 -->
<div class="query-card w-100 max-w-md mx-auto">
<form id="queryForm">
<div>
<label for="phoneNumber" class="text-left d-block">手机号:</label>
<input type="tel" id="phoneNumber" name="phoneNumber"
placeholder="请输入11位手机号码" maxlength="11" required>
<small id="phoneTip" class="text-danger d-none">请输入有效的11位手机号码</small>
</div>
<button type="submit" class="btn btn-success w-100" id="submitBtn">查询</button>
</form>
</div>
<!-- 结果展示区域 -->
<div id="result" class="w-100 max-w-md mx-auto"></div>
</div>
<!-- 国内BootCDN - jQuery 和 Bootstrap JS（稳定可用） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
// 验证jQuery加载状态
$(function() {
if (typeof $ === 'undefined') {
console.error('jQuery加载失败，请检查CDN链接');
$('#result').html('<div class="alert alert-danger">页面资源加载失败，请刷新重试</div>');
}
// 手机号格式验证
function validatePhone(phone) {
const reg = /^1[3-9]\d{9}$/;
return reg.test(phone);
}
// 表单提交事件
$('#queryForm').on('submit', function(e) {
e.preventDefault();
const phoneNumber = $.trim($('#phoneNumber').val());
const $submitBtn = $('#submitBtn');
const $phoneTip = $('#phoneTip');
// 清空之前的提示和结果
$phoneTip.addClass('d-none');
$('#result').empty();
// 验证手机号格式
if (!validatePhone(phoneNumber)) {
$phoneTip.removeClass('d-none');
$('#phoneNumber').focus();
return;
}
// 禁用按钮防止重复提交，显示加载状态
$submitBtn.prop('disabled', true).text('查询中...');
$('#result').html('<div>正在查询，请稍候...</div>');
// 发送AJAX请求（当前目录下的index.php）
$.ajax({
url: `./index.php?phone=${phoneNumber}`, // 当前目录的index.php
method: 'GET',
dataType: 'json', // 明确指定返回JSON格式
timeout: 10000, // 10秒超时
success: function(data) {
// 处理返回结果
if (data && data.pro) {
$('#result').html(`
<div class="card shadow-sm">
<div>
<h5 class="card-title text-success">查询结果</h5>
<p><strong>手机号码:</strong> ${phoneNumber}</p>
<p><strong>省份:</strong> ${data.pro || '未知'}</p>
<p><strong>城市:</strong> ${data.city || '未知'}</p>
<p><strong>运营商:</strong> ${data.op || '未知'}</p>
<p><strong>携转状态:</strong> ${data.isxie || '未知'}</p>
</div>
</div>
`);
} else {
$('#result').html('<div class="alert alert-warning">未查询到该号码的相关信息</div>');
}
},
error: function(xhr, status, error) {
// 友好的错误提示
let errorMsg = '';
switch (status) {
case 'timeout':
errorMsg = '请求超时，请检查网络或稍后重试';
break;
case 'error':
errorMsg = '服务器请求失败，错误信息：' + (xhr.responseText || '未知错误');
break;
case 'parsererror':
errorMsg = '返回数据格式错误，请检查接口';
break;
default:
errorMsg = '查询失败，请稍后重试';
}
$('#result').html(`<div class="alert alert-danger">${errorMsg}</div>`);
console.error('AJAX请求失败:', status, error);
},
complete: function() {
// 恢复按钮状态
$submitBtn.prop('disabled', false).text('查询');
}
});
});
// 手机号输入时实时验证（隐藏错误提示）
$('#phoneNumber').on('input', function() {
$('#phoneTip').addClass('d-none');
});
});
</script>
</body>
</html>