ASP.NET MVC中Ajax调用Google Books API获取JSON并展示的问题

原代码核心问题 #

• 选择器错误：未给getBookList添加选择器前缀（需为#getBookList或.getBookList）
• URL构造错误：API密钥未以key=前缀拼接，导致参数无效
• 表单默认行为未阻止：提交表单会刷新页面，中断Ajax请求
• data参数错误：重复定义volumeInfo键，且参数不符合Google Books API要求
• 错误处理位置错误：.fail方法嵌套在success函数内，无法触发
• DOM操作逻辑错误：选择器格式错误，未正确动态生成下拉框选项

修正后的完整代码 #

HTML结构（需补充）

<form id="getBookList">
  <input type="text" id="searchQuery" placeholder="输入书籍关键词">
  <button type="submit">搜索书籍</button>
</form>
<select id="bookDropdown" style="display: none;"></select>

JavaScript代码

$(document).ready(function () {
    $('#getBookList').submit(function (event) {
        // 阻止表单默认提交，避免页面刷新
        event.preventDefault();
        
        const apiKey = "AIzaSyAAD3qgVCx8MeoD6aD-CzTasKijPE-Ny3Y";
        const searchQuery = $('#searchQuery').val().trim();
        
        // 校验搜索关键词
        if (!searchQuery) {
            alert("请输入搜索关键词");
            return;
        }

        $.ajax({
            type: "GET",
            url: "https://www.googleapis.com/books/v1/volumes",
            dataType: 'json',
            data: {
                q: searchQuery,
                key: apiKey,
                maxResults: 10 // 可选：限制返回结果数量
            },
            success: function (response) {
                const dropdown = $('#bookDropdown');
                dropdown.empty(); // 清空下拉框原有内容

                // 遍历API返回的书籍数据
                response.items.forEach(book => {
                    const title = book.volumeInfo.title;
                    // 处理作者为空的情况
                    const authors = book.volumeInfo.authors ? book.volumeInfo.authors.join(', ') : '未知作者';
                    // 创建下拉选项并添加到下拉框
                    const option = $('<option>').val(title).text(`${title} - ${authors}`);
                    dropdown.append(option);
                });

                dropdown.show(); // 显示下拉框
            },
            error: function (xhr, status, errorThrown) {
                alert("抱歉，搜索失败！");
                console.log("错误信息: " + errorThrown);
                console.log("状态码: " + status);
                console.dir(xhr);
            }
        });
    });
});

关键修正说明 #

1. 选择器与表单行为：使用#getBookList定位表单，通过event.preventDefault()阻止页面刷新，确保Ajax请求完成。
2. API参数规范：将搜索关键词、API密钥作为合法参数传入，符合Google Books API的请求格式，避免无效请求。
3. 数据处理与DOM渲染：遍历API返回的items数组，提取书名和作者信息，动态生成下拉选项，同时处理作者为空的边界情况。
4. 错误处理：将错误回调移至正确位置，确保请求失败时能触发提示与日志输出。

内容的提问来源于stack exchange，提问作者état de choses