如何使用JavaScript和Google图书API实现用户输入搜索功能-html教程-PHP中文网

如何使用JavaScript和Google图书API实现用户输入搜索功能

本教程旨在解决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函数需要被定义为一个全局函数。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

<!DOCTYPE html>
<html>
<head>
    <title>Google Books Search</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        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; }
    </style>
</head>
<body>
    <h1>Google 图书搜索</h1>
    <h2>搜索结果: <span id="total"></span> 本</h2>
    <p>当前显示第3页（每页15本）。</p>

    <input id="searchterm" type="text" placeholder="输入搜索词..." >
    <button onclick="booksearch()">搜索</button> 

    <div id="results"></div>

    <script>
        // 定义一个全局函数，供按钮的onclick事件调用
        function booksearch() {
            let term = document.getElementById("searchterm").value; // 正确获取用户输入
            if (!term) { // 如果搜索词为空，则不执行搜索
                $("#results").html("<p>请输入搜索词进行查询。</p>");
                $("#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 += "<div class='bookdiv'>";
                        resultHTML += "<img src='" + cover + "' alt='" + booktitle + "封面' style='float: left' />";
                        resultHTML += "<a href='bookinfo.html?id=" + bookid + "'>" + booktitle + "</a>";
                        resultHTML += "</div>";
                    }
                } else {
                    resultHTML = "<p>未找到相关书籍。</p>";
                }
                $("#results").html(resultHTML); 
            }).fail(function(jqxhr, textStatus, error) { // 错误处理
                var err = textStatus + ", " + error;
                console.error("请求失败: " + err);
                $("#results").html("<p>搜索失败，请稍后再试。</p>");
                $("#total").text("0");
            });
        }
    </script>
</body>
</html>

登录后复制

注意事项：

在构建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的开发范式。

<!DOCTYPE html>
<html>
<head>
    <title>Google Books Search (Modern JS)</title>
    <style>
        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; }
    </style>
</head>
<body>
    <h1>Google 图书搜索 (现代JS)</h1>
    <h2>搜索结果: <span id="total"></span> 本</h2>
    <p>当前显示第3页（每页15本）。</p>

    <input id="searchterm" type="text" placeholder="输入搜索词..." >
    <button id="searchButton">搜索</button> 

    <div id="loading">正在加载...</div>
    <div id="results"></div>

    <script>
        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 = "<p>请输入搜索词进行查询。</p>";
                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 += "<div class='bookdiv'>";
                        resultHTML += `<img src='${cover}' alt='${booktitle}封面' style='float: left' />`;
                        resultHTML += `<a href='bookinfo.html?id=${bookid}'>${booktitle}</a>`;
                        resultHTML += "</div>";
                    });
                } else {
                    resultHTML = "<p>未找到相关书籍。</p>";
                }
                resultsDiv.innerHTML = resultHTML; 

            } catch (error) {
                console.error("搜索请求失败:", error);
                resultsDiv.innerHTML = `<p>搜索失败，请稍后再试。错误信息: ${error.message}</p>`;
                totalSpan.textContent = "0";
            } finally {
                loadingDiv.style.display = 'none'; // 隐藏加载提示
            }
        }

        // 为按钮添加事件监听器
        searchButton.addEventListener('click', performBookSearch);

        // 页面加载时执行一次搜索 (可选，如果希望页面初始时就有内容)
        // window.addEventListener('load', performBookSearch);
    </script>
</body>
</html>

登录后复制

现代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实现用户输入搜索功能的详细内容，更多请关注php中文网其它相关文章！