如何将HTML表单输入传入Express GET请求调用Google Books API

现有代码缺三个核心环节：前端拿到用户输入后未发起对后端接口的请求、后端路由未读取前端传入的查询参数、后端拿到第三方接口返回后未将响应回传给前端，按以下步骤修改即可：

1. 调整前端script.js逻辑 #

你当前仅获取了用户输入值，未发起接口请求，替换为以下代码：

const submitForm = document.getElementById('submit')

submitForm.addEventListener('submit', async function(event){
    event.preventDefault()
    const query = document.getElementById('query').value.trim()
    if(!query) return alert('请输入搜索关键词')
    // 对关键词做编码处理，避免特殊字符导致参数解析异常
    const res = await fetch(`/search?q=${encodeURIComponent(query)}`)
    const bookResult = await res.json()
    // 此处可替换为自定义的结果渲染逻辑，先打印日志验证链路
    console.log('图书搜索结果：', bookResult)
})

2. 调整后端index.js逻辑 #

现有代码有两个明显问题：app.listen 放在路由定义前会导致路由不生效；路由内未读取请求参数、未向前端返回响应，替换为以下代码：

const express = require('express')
const app = express()
const port = 3000

app.use(express.static('public'))

// 路由必须定义在app.listen之前
app.get('/search', async (req, res) => {
    // 从GET请求的查询参数中读取前端传入的搜索关键词
    const searchKeyword = req.query.q
    if(!searchKeyword) return res.status(400).json({ error: '搜索关键词不能为空' })
    try {
        const googleApiRes = await fetch(`https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(searchKeyword)}`)
        const bookData = await googleApiRes.json()
        // 将第三方接口返回的图书数据回传给前端
        res.json(bookData)
    } catch (err) {
        res.status(500).json({ error: '搜索请求失败', detail: err.message })
    }
})

app.listen(port, () => {
    console.log(`服务已启动，访问 http://localhost:${port}`)
})

注意：Node.js 18及以上版本才内置全局fetch方法，如果你的本地Node版本低于18，需要先执行npm install node-fetch@2安装依赖，再在index.js顶部添加const fetch = require('node-fetch')即可正常使用。

3. 验证方法 #

修改完成后重启Node服务，打开页面输入任意图书关键词点击提交，打开浏览器开发者工具的控制台，就能看到返回的图书数据，后续自行补充DOM渲染逻辑将结果展示到页面即可。

内容的提问来源于stack exchange，提问作者torrey pines