本教程旨在解决javascript中从用户输入字段获取值时常见的字符串引用错误，并展示如何正确地将用户搜索词传递给google图书api。文章还将深入探讨使用现代javascript的`fetch` api和`urlsearchparams`来构建和执行api请求的最佳实践，从而提升代码的健壮性和可维护性。
在开发Web应用程序时，集成第三方API以获取动态数据是常见需求，Google图书API便是一个很好的例子。本教程将引导您完成一个使用JavaScript与Google图书API进行交互的简单搜索功能，重点解决在处理用户输入时可能遇到的常见问题，并介绍如何采用现代Web开发实践来优化您的代码。
1. 理解并修正用户输入获取错误
许多开发者在初次尝试从HTML输入字段获取用户值时，可能会遇到一个常见错误：将JavaScript表达式错误地包裹在字符串引号中。
错误示例：
let term = "document.getElementById("searchterm").value;";
在这个例子中，document.getElementById(“searchterm”).value;被双引号包裹，导致JavaScript将其视为一个普通的字符串字面量，而不是一个可执行的代码表达式。因此，term变量的值将是字符串”document.getElementById(“searchterm”).value;”本身，而不是输入框中实际的用户输入。当这个错误的字符串作为搜索参数传递给API时，API将无法识别，导致搜索功能失效。
立即学习“Java免费学习笔记（深入）”；
正确获取用户输入：
要正确获取输入字段的值，您需要直接调用document.getElementById()方法并访问其value属性，而不使用额外的引号：
let term = document.getElementById("searchterm").value;
这样，term变量将包含用户在ID为searchterm的输入框中输入的实际文本。
修正后的jQuery示例代码：
考虑到原始代码使用了jQuery的$.getJSON方法，以下是修正用户输入获取问题后的代码示例。请注意，为了让HTML中的onclick=”booksearch()”能够调用到该函数，booksearch函数需要被定义为一个全局函数。
Google Books Search body { font-family: Arial, sans-serif; margin: 20px; } #results { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .bookdiv { width: 280px; border: 1px solid #eee; padding: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } .bookdiv img { float: left; margin-right: 10px; } .bookdiv a { text-decoration: none; color: #007bff; font-weight: bold; } .bookdiv a:hover { text-decoration: underline; } input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; }Google 图书搜索
搜索结果: 本
当前显示第3页（每页15本）。
// 定义一个全局函数，供按钮的onclick事件调用 function booksearch() { let term = document.getElementById("searchterm").value; // 正确获取用户输入 if (!term) { // 如果搜索词为空，则不执行搜索 $("#results").html("请输入搜索词进行查询。
"); $("#total").text("0"); return; } // 构建API请求参数 var parameter = "?q=" + encodeURIComponent(term) + "&startIndex=30&maxResults=15"; var service_point = "https://www.googleapis.com/books/v1/volumes/" + parameter; // 使用jQuery的getJSON方法发起API请求 $.getJSON(service_point, function (json) { console.log(json); var total = json.totalItems || 0; // 如果没有结果，totalItems可能不存在 $("#total").text(total); var resultHTML = ""; if (json.items && json.items.length > 0) { for (let i = 0; i < json.items.length; i++) { // 建议使用let和明确的循环变量 var book = json.items[i]; var booktitle = book.volumeInfo.title; var bookid = book.id; var cover = ""; if (book.volumeInfo.imageLinks && book.volumeInfo.imageLinks.smallThumbnail) { cover = book.volumeInfo.imageLinks.smallThumbnail; } resultHTML += ""; resultHTML += "@@##@@"; resultHTML += "" + booktitle + ""; resultHTML += ""; } } else { resultHTML = "未找到相关书籍。
"; } $("#results").html(resultHTML); }).fail(function(jqxhr, textStatus, error) { // 错误处理 var err = textStatus + ", " + error; console.error("请求失败: " + err); $("#results").html("搜索失败，请稍后再试。
"); $("#total").text("0"); }); }动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版查看详情动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
注意事项：
在构建URL参数时，使用encodeURIComponent()对用户输入的搜索词进行编码，以防止特殊字符破坏URL结构。添加了基本的错误处理和空结果提示。将booksearch定义为全局函数，以便onclick事件可以调用它。
2. 使用现代JavaScript：fetch() 和 URLSearchParams
虽然jQuery的$.getJSON在很多场景下依然可用，但现代JavaScript提供了更强大、更灵活的API来处理网络请求和URL参数：fetch() 和 URLSearchParams。采用这些API可以使您的代码更具可读性、可维护性，并减少对外部库的依赖。
2.1 fetch() API
fetch() API提供了一个通用的接口来获取资源（例如，通过网络）。它返回一个Promise，这使得处理异步操作更加简洁。
基本用法：
fetch(url) .then(response => response.json()) // 解析JSON响应 .then(data => console.log(data)) // 处理数据 .catch(error => console.error('Error:', error)); // 错误处理
2.2 URLSearchParams API
URLSearchParams接口定义了用于处理URL的查询字符串的方法。它能自动处理URL编码，使得添加、获取和删除URL参数变得非常简单。
基本用法：
const params = new URLSearchParams();params.append('q', 'JavaScript');params.append('startIndex', '0');console.log(params.toString()); // 输出: q=JavaScript&startIndex=0
2.3 结合 fetch() 和 URLSearchParams
下面是使用fetch()和URLSearchParams重构Google图书搜索功能的完整示例。这种方法更符合现代JavaScript的开发范式。
Google Books Search (Modern JS) body { font-family: Arial, sans-serif; margin: 20px; } #results { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .bookdiv { width: 280px; border: 1px solid #eee; padding: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } .bookdiv img { float: left; margin-right: 10px; } .bookdiv a { text-decoration: none; color: #007bff; font-weight: bold; } .bookdiv a:hover { text-decoration: underline; } input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } #loading { display: none; margin-top: 10px; color: #555; }Google 图书搜索 (现代JS)
搜索结果: 本
当前显示第3页（每页15本）。
正在加载...const searchInput = document.getElementById("searchterm"); const searchButton = document.getElementById("searchButton"); const totalSpan = document.getElementById("total"); const resultsDiv = document.getElementById("results"); const loadingDiv = document.getElementById("loading"); // 异步函数处理搜索逻辑 async function performBookSearch() { const term = searchInput.value.trim(); // 获取用户输入并去除首尾空格 if (!term) { resultsDiv.innerHTML = "请输入搜索词进行查询。
"; totalSpan.textContent = "0"; return; } loadingDiv.style.display = 'block'; // 显示加载提示 resultsDiv.innerHTML = ''; // 清空之前的搜索结果 try { // 使用URLSearchParams构建查询参数，自动处理编码 const params = new URLSearchParams(); params.append('q', term); params.append('startIndex', '30'); params.append('maxResults', '15'); const service_point = `https://www.googleapis.com/books/v1/volumes?${params.toString()}`; // 使用fetch API发起请求 const response = await fetch(service_point); // 检查HTTP响应状态 if (!response.ok) { throw new Error(`HTTP 错误！状态码: ${response.status}`); } const json = await response.json(); // 解析JSON响应 console.log(json); const total = json.totalItems || 0; totalSpan.textContent = total; let resultHTML = ""; if (json.items && json.items.length > 0) { json.items.forEach(book => { const booktitle = book.volumeInfo.title; const bookid = book.id; const cover = (book.volumeInfo.imageLinks && book.volumeInfo.imageLinks.smallThumbnail) ? book.volumeInfo.imageLinks.smallThumbnail : 'https://via.placeholder.com/128x192?text=No+Cover'; // 提供一个默认封面图 resultHTML += ""; resultHTML += `@@##@@`; resultHTML += `${booktitle}`; resultHTML += ""; }); } else { resultHTML = "未找到相关书籍。
"; } resultsDiv.innerHTML = resultHTML; } catch (error) { console.error("搜索请求失败:", error); resultsDiv.innerHTML = `搜索失败，请稍后再试。错误信息: ${error.message}
`; totalSpan.textContent = "0"; } finally { loadingDiv.style.display = 'none'; // 隐藏加载提示 } } // 为按钮添加事件监听器 searchButton.addEventListener('click', performBookSearch); // 页面加载时执行一次搜索 (可选，如果希望页面初始时就有内容) // window.addEventListener('load', performBookSearch);
现代JS实践要点：
异步/等待 (async/await)： 使用async函数和await关键字可以使异步代码看起来像同步代码一样，提高可读性。事件监听器 (addEventListener)： 推荐使用addEventListener来绑定事件，而不是onclick属性，这使得事件处理与HTML结构分离，更易于管理。模板字符串： 使用反引号 (`) 定义模板字符串，可以方便地嵌入变量和表达式，避免复杂的字符串拼接。错误处理 (try…catch)： fetch API在网络错误时不会直接抛出错误，只会将response.ok设置为false。因此，需要手动检查response.ok并抛出错误，然后在catch块中统一处理。加载状态： 添加了简单的加载提示，提升用户体验。
3. 总结
通过本教程，您应该已经掌握了在JavaScript中正确获取用户输入并将其用于API请求的关键技巧。从纠正简单的字符串引用错误，到采用fetch()和URLSearchParams等现代API，这些实践将帮助您构建更健壮、更易于维护的Web应用程序。在实际开发中，始终注意输入验证、错误处理以及提供良好的用户反馈，这些都是提升应用质量的重要方面。
以上就是如何使用JavaScript和Google图书API实现用户输入搜索功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1601607.html
微信扫一扫 
支付宝扫一扫 
