创建一个简单的HTML搜索页面和一个结果展示页面，可以通过Ajax调用API来实现。这里我将提供一个基本的示例，包括前端HTML、CSS以及JavaScript代码。
第一步：创建搜索页面（search.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="search-container">
<h1>Search</h1>
<input type="text" id="searchInput" placeholder="Search here...">
<button onclick="search()">Search</button>
</div>
<script>
function search() {
const input = document.getElementById('searchInput').value;
fetch(`https://api.example.com/search?q=${input}`)
.then(response => response.json())
.then(data => {
localStorage.setItem('searchResults', JSON.stringify(data));
window.location.href = 'results.html';
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
第二步：创建结果展示页面（results.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Results Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="results-container">
<h1>Results</h1>
<ul id="resultsList"></ul>
</div>
<script>
window.onload = function() {
const results = JSON.parse(localStorage.getItem('searchResults'));
if (results) {
const resultsList = document.getElementById('resultsList');
for (const result of results) {
const li = document.createElement('li');
li.textContent = result.title; // 假设结果中有title字段
resultsList.appendChild(li);
}
}
};
</script>
</body>
</html>
第三步：添加样式（styles.css）
.search-container, .results-container {
width: 50%;
margin: auto;
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
注意事项：
- 这里使用了
fetch API来从外部服务器获取数据。请替换成你合作方的API。
- 结果页面从
localStorage中读取搜索结果并显示出来。这只是一个简单的示例，实际应用中可能需要更复杂的错误处理和用户体验优化。
- 确保你的API返回的数据格式与示例中的
result.title相匹配，否则你需要调整JavaScript中的解析逻辑。
| 
发表于 2024-6-6 18:23
|
发表于 2024-6-8 13:12
