这是一个接口地址 httpszyxywlapiccqqapi这是调用的示例 httpszyxywlapiccqqapiqq=336699这是我给你的要求请按照我的要求写出代码请求方式：get或post返回的值的格式为json页面中有一个输入框输入数字后点击查询按钮调用这个接口httpszyxywlapiccqqapiqq= 输入的数字输出到=号的后面得到返回的值后弹出一个弹窗输出返回的值到弹窗上面
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>查询QQ号信息</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
margin-top: 30px;
text-align: center;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
outline: none;
}
input[type="submit"] {
margin-left: 10px;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
input[type="submit"]:hover {
background-color: #0062cc;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
.popup__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.popup__close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #333;
cursor: pointer;
}
</style>
</head>
<body>
<h1>查询QQ号信息</h1>
<form>
<input type="text" id="qq" placeholder="请输入QQ号">
<input type="submit" value="查询">
</form>
<div class="popup">
<span class="popup__close">×</span>
<p id="result"></p>
</div>
<div class="popup__overlay"></div>
<script type="text/javascript">
function showPopup(message) {
var popup = document.querySelector('.popup');
var overlay = document.querySelector('.popup__overlay');
var closeBtn = document.querySelector('.popup__close');
var result = document.querySelector('#result');
result.innerText = message;
popup.style.display = 'block';
overlay.style.display = 'block';
closeBtn.addEventListener('click', function() {
popup.style.display = 'none';
overlay.style.display = 'none';
});
}
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var qq = document.querySelector('#qq').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
showPopup(response.data);
} else {
showPopup('请求失败，请稍后再试！');
}
}
};
xhr.open('GET', 'https://zy.xywlapi.cc/qqapi?qq=' + qq);
xhr.send();
});
</script>
</body>
</html>
说明：
- 在页面中添加了一个输入框和一个查询按钮，使用了form表单。
- 在页面中添加了一个弹窗，用于显示查询结果。
- 使用了XMLHttpRequest对象向接口地址发送GET请求，并在请求成功后显示查询结果
原文地址: https://www.cveoy.top/t/topic/fPAh 著作权归作者所有。请勿转载和采集!