58 lines
2.2 KiB
HTML
58 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>API Result</title>
|
|
</head>
|
|
<body>
|
|
<h1>某机场乘客数量变化趋势预测</h1>
|
|
|
|
<!-- Container for the image result -->
|
|
<div id="result-container"></div>
|
|
|
|
<script>
|
|
// Function to make a GET request to the API using Fetch
|
|
function fetchData() {
|
|
fetch('http://192.168.1.13:8000/server/time_predict/')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('网络响应不正常');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// 记录整个响应对象
|
|
console.log(data);
|
|
|
|
// 解析 JSON 数据
|
|
let data1 = JSON.parse(data);;
|
|
|
|
// 获取结果容器
|
|
const resultContainer = document.getElementById('result-container');
|
|
|
|
// 检查 data.image 是否已定义
|
|
if (data1 && data1.image) {
|
|
// 创建一个图像容器，并将 base64 编码的图像添加到容器中
|
|
const imageContainer = document.createElement('div');
|
|
imageContainer.innerHTML = `<img src="data:image/png;base64, ${data1.image}"
|
|
style="width: auto; height: auto; max-width: 100%;" alt="检测结果" onclick="openModal(this)">`;
|
|
|
|
// 将图像容器添加到结果容器中
|
|
resultContainer.appendChild(imageContainer);
|
|
} else {
|
|
console.error("响应结果中没有 'image' 属性或 'image' 属性值为空。");
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('在获取操作中发生错误：', error);
|
|
});
|
|
}
|
|
|
|
// Call the fetchData function when the page loads
|
|
fetchData();
|
|
</script>
|
|
</body>
|
|
</html>
|