如何实现HTML文本框调用Wikipedia API获取搜索结果？
2026-5-27
实现维基百科API搜索功能（类似Coding Train #75）
嘿，我来帮你搞定这个维基API搜索功能！你的现有代码只是个基础的文本框表单，默认提交会刷新页面，这就是搜索时页面重置的核心原因。咱们一步步调整，加上API调用和结果展示的逻辑：
第一步：先搞定表单刷新问题
浏览器默认会在表单提交时触发页面刷新，咱们得给表单加个提交事件监听器，用preventDefault()阻止这个默认行为，这样才能让自定义的搜索逻辑跑起来。
第二步：构造维基API请求链接
维基百科提供了公开的API接口，咱们用https://en.wikipedia.org/w/api.php来访问，关键参数得记清楚：
action=query：告诉API咱们要执行查询操作list=search：指定查询类型为内容搜索srsearch=你的关键词：这里填用户输入的搜索词，要用encodeURIComponent()处理特殊字符format=json：要求返回JSON格式的数据，方便JS解析origin=*：解决跨域请求问题（因为咱们的页面和维基API不在同一域名下）
第三步：发送请求并渲染搜索结果
用fetch()函数发送API请求，拿到返回的结果后，动态创建DOM元素把搜索结果展示在页面上。
完整可运行代码示例
<!DOCTYPE html> <html> <head> <title>维基百科搜索</title> <style> /* 简单美化页面，提升体验 */ body { max-width: 800px; margin: 2rem auto; padding: 0 1rem; font-family: Arial, sans-serif; } #search-form { margin-bottom: 2rem; display: flex; gap: 0.5rem; } #search-input { flex: 1; padding: 0.6rem; font-size: 1rem; border: 1px solid #ddd; border-radius: 4px; } #submit-btn { padding: 0.6rem 1.2rem; font-size: 1rem; background-color: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer; } .result-item { margin-bottom: 1.2rem; padding: 1rem; border: 1px solid #eee; border-radius: 4px; transition: box-shadow 0.2s; } .result-item:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .result-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem; color: #0066cc; } .result-snippet { color: #555; line-height: 1.4; } </style> </head> <body> <form id="search-form"> <input type="text" id="search-input" placeholder="输入关键词搜索维基百科"> <button type="submit" id="submit-btn">搜索</button> </form> <div id="results-container"></div> <script> // 获取页面元素 const form = document.getElementById('search-form'); const input = document.getElementById('search-input'); const resultsContainer = document.getElementById('results-container'); // 监听表单提交事件 form.addEventListener('submit', async (e) => { // 阻止默认页面刷新 e.preventDefault(); // 获取并处理搜索关键词 const searchTerm = input.value.trim(); if (!searchTerm) { resultsContainer.innerHTML = '<p>请输入搜索关键词</p>'; return; } try { // 构造API请求URL const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(searchTerm)}&format=json&origin=*`; // 发送请求并解析返回数据 const response = await fetch(apiUrl); const data = await response.json(); // 清空之前的搜索结果 resultsContainer.innerHTML = ''; // 遍历结果并渲染到页面 data.query.search.forEach(result => { const resultItem = document.createElement('div'); resultItem.className = 'result-item'; const title = document.createElement('div'); title.className = 'result-title'; title.textContent = result.title; const snippet = document.createElement('div'); snippet.className = 'result-snippet'; // 维基返回的摘要带高亮标签，用innerHTML解析 snippet.innerHTML = result.snippet; resultItem.appendChild(title); resultItem.appendChild(snippet); resultsContainer.appendChild(resultItem); }); // 如果没有搜索结果 if (data.query.search.length === 0) { resultsContainer.innerHTML = '<p>没有找到相关结果，请尝试其他关键词</p>'; } } catch (error) { console.error('搜索请求出错:', error); resultsContainer.innerHTML = '<p>搜索出错了，请稍后重试</p>'; } }); </script> </body> </html>
关键代码说明
- 阻止默认提交：
e.preventDefault()让表单提交时不再刷新页面，转而执行咱们的搜索逻辑。 - API请求处理：用
encodeURIComponent()处理搜索关键词，避免特殊字符破坏URL结构；origin=*是跨域请求的必需参数。 - 结果渲染：遍历API返回的搜索结果数组，动态创建DOM元素展示标题和摘要，摘要用
innerHTML解析是因为维基返回的内容带关键词高亮的HTML标签。 - 异常处理：用
try/catch捕获请求过程中的网络错误或数据解析错误，给用户友好的提示。
现在用Brackets运行这段代码，输入关键词搜索，就能看到和Coding Train #75类似的维基百科搜索结果啦！
内容的提问来源于stack exchange，提问作者Constantin
