使用 Vanilla JS 从表中选择数据

Question

我使用 XAMPP 托管我的网站，并且我有一个可以参考的数据库连接。

我有 3 个下拉菜单，标题为：翻译、书籍、章节。每个数据都存储在我的数据库中。

我想使用 Vanilla JS 根据用户输入的翻译来查询书籍的下拉菜单内容。

示例：如果用户选择“英语”，则一旦选择英语，书籍下拉列表就会显示所有英语书籍。

如果可能的话，我希望这些下拉列表能够使用 fetch 实时更新。我计划多次使用它，我希望在我的主页上有查询，在另一个页面上有服务器/数据库连接。

如何创建一个 JS 函数来根据一个下拉菜单的值运行查询并从另一个文件引用的连接中提取数据？

示例：

book.html

<script> 
async function fetchBooks() {
                    const selectedTranslation = document.getElementById('translations').value;

                    try {
                        const response = await fetch(`/getBooks?translation=${selectedTranslation}`);
                        const books = await response.json();

                        const booksDropdown = document.getElementById('books');
                        booksDropdown.innerHTML = '';

                        books.forEach(book => {
                            const option = document.createElement('option');
                            option.value = book;
                            option.textContent = book;
                            booksDropdown.appendChild(option);
                            console.log(option);
                        });
                        
                    } catch (error) {
                        console.error('Error fetching books:', error);
                    }
                }
</script>

数据库.js

        // server.js
    
const express = require('express');
const mysql = require('mysql');

const app = express();

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'dataBase'
});

app.get('/getBooks', (req, res) => {
    const selectedTranslation = req.query.translation;
    const query = `SELECT DISTINCT book FROM english`;

    connection.query(query, [selectedTranslation], (err, results) => {
        if (err) {
            console.error('Error fetching books:', err);
            res.status(500).json({ error: 'Failed to fetch books' });
        } else {
            const books = results.map(result => result.book);
            res.json(books);
        }
    });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Answer 1

您提到您正在使用 XAMPP。 XAMPP 基于 PHP 作为服务器端，这意味着您需要使用 PHP 设置数据库连接（如果您想使用 NodeJS 作为服务器端，那么您实际上并不需要 XAMPP）。

之后，您需要编写一个方法来查询数据库并根据输入以易于使用的格式（例如 JSON）返回数据。

然后，应该从一个新的 API 调用该函数，该 API 将使用 javascript 从客户端调用以异步接收数据。

收到数据后，您应该更新 UI 以将其显示给用户。