使用HTML页面调用API接口查询QQ号码信息
下面是一个示例的HTML页面，其中包含一个输入框和一个按钮，点击按钮后会发送请求到指定的API接口，并将返回的结果信息显示在页面上。
<!DOCTYPE html>
<html>
<head>
<title>API测试页面</title>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
</head>
<body>
<h1>API测试页面</h1>
<label for='qqInput'>请输入QQ号码：</label>
<input type='text' id='qqInput'>
<button onclick='queryQQ()'>查询</button>
<div id='result'></div>
<script>
function queryQQ() {
var qq = document.getElementById('qqInput').value;
var apiUrl = 'https://zy.xywlapi.cc/qqapi?qq=' + qq;
$.ajax({
url: apiUrl,
dataType: 'json',
success: function(data) {
var result = '状态码：' + data.status + '<br>';
result += '消息：' + data.message + '<br>';
result += 'QQ号码：' + data.qq + '<br>';
result += '手机号码：' + data.phone + '<br>';
result += '手机号码归属地：' + data.phonediqu + '<br>';
document.getElementById('result').innerHTML = result;
},
error: function() {
document.getElementById('result').innerHTML = '请求失败，请重试';
}
});
}
</script>
</body>
</html>
在上面的代码中，我们使用了jQuery库来发送异步请求。首先，需要在页面的头部引入jQuery库的CDN链接。然后，在点击查询按钮时，会调用queryQQ()函数。该函数首先获取输入框中的QQ号码，然后拼接API接口的URL，使用$.ajax()方法发送GET请求。请求成功后，将返回的结果信息拼接成HTML格式，并将其插入到页面中的<div id='result'>标签内。如果请求失败，会显示'请求失败，请重试'。
原文地址: https://www.cveoy.top/t/topic/p9sN 著作权归作者所有。请勿转载和采集!