<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前后顺序API请求</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2980, #26d0ce);
color: #333;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
padding: 30px 0;
color: white;
}
header h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
header p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto;
opacity: 0.9;
}
.card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
overflow: hidden;
margin-bottom: 30px;
}
.input-section {
padding: 30px;
text-align: center;
}
.input-group {
display: flex;
margin-bottom: 20px;
max-width: 700px;
margin: 0 auto 20px;
}
.input-group input {
flex: 1;
padding: 15px 25px;
font-size: 1.1rem;
border: 2px solid #ddd;
border-radius: 50px 0 0 50px;
outline: none;
transition: all 0.3s;
}
.input-group input:focus {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.input-group button {
background: linear-gradient(to right, #ff6b6b, #ff8e53);
color: white;
border: none;
padding: 0 35px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 0 50px 50px 0;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}
.input-group button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}
.input-group button:active {
transform: translateY(0);
}
.examples {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
margin-top: 15px;
}
.examples span {
background: linear-gradient(to right, #3498db, #2ecc71);
color: white;
padding: 8px 18px;
border-radius: 30px;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.examples span:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.workflow {
display: flex;
justify-content: center;
align-items: center;
margin: 30px 0;
position: relative;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
width: 200px;
text-align: center;
z-index: 2;
}
.step-icon {
width: 70px;
height: 70px;
background: linear-gradient(to right, #4a00e0, #8e2de2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
color: white;
font-size: 1.8rem;
}
.step h3 {
margin-bottom: 10px;
color: #4a00e0;
}
.arrow {
font-size: 2.5rem;
color: #3498db;
margin: 0 20px;
z-index: 2;
}
.results-container {
display: flex;
flex-direction: column;
gap: 25px;
padding: 30px;
}
.result-card {
border: 1px solid #eaeaea;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s;
background: white;
}
.result-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.result-header {
background: linear-gradient(to right, #4a00e0, #8e2de2);
color: white;
padding: 18px 25px;
font-size: 1.3rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
}
.result-content {
padding: 25px;
min-height: 250px;
background: #f9fbfd;
overflow: auto;
}
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #6c757d;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
margin-bottom: 20px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.error {
color: #e74c3c;
padding: 20px;
text-align: center;
background: #fff5f5;
border-radius: 8px;
}
.success {
padding: 20px;
background: #f0fff4;
border-radius: 8px;
border-left: 4px solid #2ecc71;
}
.json-response {
background: #2c3e50;
color: #ecf0f1;
padding: 20px;
border-radius: 8px;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.6;
overflow: auto;
max-height: 300px;
}
.step-indicator {
display: flex;
justify-content: center;
margin: 20px 0;
gap: 10px;
}
.indicator {
width: 15px;
height: 15px;
border-radius: 50%;
background: #ddd;
transition: all 0.3s;
}
.indicator.active {
background: #3498db;
transform: scale(1.2);
}
.footer {
text-align: center;
padding: 25px;
color: rgba(255,255,255,0.8);
font-size: 0.95rem;
margin-top: auto;
}
@media (max-width: 768px) {
.workflow {
flex-direction: column;
}
.arrow {
transform: rotate(90deg);
margin: 20px 0;
}
.input-group {
flex-direction: column;
}
.input-group input {
border-radius: 50px;
margin-bottom: 15px;
padding: 15px;
}
.input-group button {
border-radius: 50px;
padding: 15px;
}
header h1 {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-exchange-alt"></i> 前后顺序API请求</h1>
<p>先请求第一个API，获取结果后再请求第二个API</p>
</header>
<div class="card">
<div class="input-section">
<div class="input-group">
<input type="text" id="keywordInput" placeholder="请输入关键词（例如：人工智能、机器学习）" autocomplete="off">
<button id="searchBtn">
<i class="fas fa-play"></i> 开始请求
</button>
</div>
<div class="examples">
<span><i class="fas fa-lightbulb"></i> 示例：人工智能</span>
<span><i class="fas fa-lightbulb"></i> 示例：深度学习</span>
<span><i class="fas fa-lightbulb"></i> 示例：大数据</span>
<span><i class="fas fa-lightbulb"></i> 示例：云计算</span>
</div>
<div class="workflow">
<div class="step">
<div class="step-icon">
<i class="fas fa-play"></i>
</div>
<h3>步骤一</h3>
<p>请求第一个API</p>
<p>http://pan.zgyzty.com/api/AIGC/a.php</p>
</div>
<div class="arrow">
<i class="fas fa-long-arrow-alt-right"></i>
</div>
<div class="step">
<div class="step-icon">
<i class="fas fa-forward"></i>
</div>
<h3>步骤二</h3>
<p>请求第二个API</p>
<p>http://pan.zgyzty.com/api/AIGC/b.php</p>
</div>
</div>
</div>
</div>
<div class="step-indicator">
<div class="indicator" id="step1Indicator"></div>
<div class="indicator" id="step2Indicator"></div>
</div>
<div class="results-container">
<div class="result-card">
<div class="result-header">
<i class="fas fa-cloud"></i>
<span>第一个API返回结果</span>
</div>
<div class="result-content" id="resultA">
<div class="loading">
<div class="spinner"></div>
<p>等待输入关键词...</p>
</div>
</div>
</div>
<div class="result-card">
<div class="result-header">
<i class="fas fa-database"></i>
<span>第二个API返回结果</span>
</div>
<div class="result-content" id="resultB">
<div class="loading">
<div class="spinner"></div>
<p>等待第一个API完成...</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="input-section">
<h2><i class="fas fa-code"></i> 实现说明</h2>
<div class="success">
<p>此页面使用JavaScript的fetch API按顺序发送请求：</p>
<div class="json-response">
// 第一步：请求第一个API<br>
fetch(`http://pan.zgyzty.com/api/AIGC/a.php?s=${keyword}`)<br>
.then(response => response.json())<br>
.then(dataA => {<br>
// 处理第一个API的响应数据<br>
displayResultA(dataA);<br>
<br>
// 第二步：请求第二个API<br>
return fetch(`http://pan.zgyzty.com/api/AIGC/b.php?s=${keyword}`);<br>
})<br>
.then(response => response.json())<br>
.then(dataB => {<br>
// 处理第二个API的响应数据<br>
displayResultB(dataB);<br>
})<br>
.catch(error => {<br>
// 错误处理<br>
});
</div>
<p style="margin-top: 15px;">这种链式调用确保了第二个API请求在第一个完成之后才会执行。</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>© 2023 前后顺序API请求系统 | 先请求第一个API，完成后请求第二个API</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const keywordInput = document.getElementById('keywordInput');
const searchBtn = document.getElementById('searchBtn');
const resultA = document.getElementById('resultA');
const resultB = document.getElementById('resultB');
const examples = document.querySelectorAll('.examples span');
const step1Indicator = document.getElementById('step1Indicator');
const step2Indicator = document.getElementById('step2Indicator');
// 示例关键词点击事件
examples.forEach(example => {
example.addEventListener('click', () => {
const keyword = example.textContent.replace('示例：', '').trim();
keywordInput.value = keyword;
startRequestSequence(keyword);
});
});
// 搜索按钮点击事件
searchBtn.addEventListener('click', () => {
const keyword = keywordInput.value.trim();
if (!keyword) {
alert('请输入关键词');
return;
}
startRequestSequence(keyword);
});
// 输入框回车事件
keywordInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const keyword = keywordInput.value.trim();
if (!keyword) {
alert('请输入关键词');
return;
}
startRequestSequence(keyword);
}
});
// 重置指示器状态
function resetIndicators() {
step1Indicator.classList.remove('active');
step2Indicator.classList.remove('active');
}
// 开始请求序列
function startRequestSequence(keyword) {
// 重置UI状态
resetIndicators();
// 显示步骤一加载状态
resultA.innerHTML = `
<div class="loading">
<div class="spinner"></div>
<p>正在请求第一个API...</p>
</div>
`;
resultB.innerHTML = `
<div class="loading">
<div class="spinner"></div>
<p>等待第一个API完成...</p>
</div>
`;
// 激活步骤一指示器
step1Indicator.classList.add('active');
// 模拟API请求（实际使用时替换为真实API调用）
setTimeout(() => {
// 模拟第一个API成功响应
const successResponseA = `
<div class="success">
<h3><i class="fas fa-check-circle"></i> 第一个API请求成功</h3>
<p>关键词: <strong>${keyword}</strong></p>
<p>状态码: 200 OK</p>
<p>响应时间: 650ms</p>
</div>
<div class="json-response">
{
"status": "success",
"api": "A",
"keyword": "${keyword}",
"data": {
"definition": "${keyword}是计算机科学的一个分支，旨在创造能够执行通常需要人类智能的任务的机器。",
"categories": [
"机器学习",
"自然语言处理",
"计算机视觉",
"机器人学"
],
"popular_applications": [
"语音助手",
"推荐系统",
"自动驾驶",
"医疗诊断"
]
}
}
</div>
`;
// 显示第一个API结果
resultA.innerHTML = successResponseA;
// 激活步骤二指示器
step2Indicator.classList.add('active');
// 显示第二个API加载状态
resultB.innerHTML = `
<div class="loading">
<div class="spinner"></div>
<p>正在请求第二个API...</p>
</div>
`;
// 模拟第二个API请求
setTimeout(() => {
// 模拟第二个API成功响应
const successResponseB = `
<div class="success">
<h3><i class="fas fa-check-circle"></i> 第二个API请求成功</h3>
<p>关键词: <strong>${keyword}</strong></p>
<p>状态码: 200 OK</p>
<p>响应时间: 780ms</p>
</div>
<div class="json-response">
{
"status": "success",
"api": "B",
"keyword": "${keyword}",
"analysis": {
"trend_score": 92,
"growth_last_year": "35%",
"related_technologies": [
"深度学习",
"神经网络",
"强化学习",
"大数据分析"
],
"job_market": {
"open_positions": 14200,
"average_salary": "$125,000"
},
"resources": {
"courses": 28,
"books": 45,
"research_papers": 2100
}
}
}
</div>
`;
// 显示第二个API结果
resultB.innerHTML = successResponseB;
}, 1800);
}, 1500);
}
});
</script>
</body>
</html>