如何根据用户输入查询数据库，并在另一个页面显示结果？

要实现根据用户输入查询数据库并在另一个页面显示结果的功能，通常涉及以下几个步骤和技术概念：

基础概念

前端开发：负责用户界面的展示和交互。
后端开发：处理业务逻辑和数据存储。
数据库：存储和管理数据。
网络通信：前端和后端之间的数据传输。

类型

Web应用：通常使用HTTP协议进行通信。
API接口：后端提供API供前端调用。

应用场景

电子商务网站：用户搜索商品并显示结果。
社交媒体平台：用户搜索内容并显示相关帖子。

实现步骤

前端页面：创建一个输入框和一个按钮，用于用户输入查询条件。
前端逻辑：当用户点击按钮时，通过AJAX请求将查询条件发送到后端。
后端逻辑：接收查询条件，执行数据库查询，并将结果返回给前端。
数据库查询：使用SQL语句根据查询条件从数据库中检索数据。
显示结果：前端接收到查询结果后，在另一个页面显示这些数据。

示例代码

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Page</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Enter search term">
    <button onclick="search()">Search</button>

    <script>
        async function search() {
            const searchTerm = document.getElementById('searchInput').value;
            const response = await fetch('/api/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ query: searchTerm })
            });
            const data = await response.json();
            window.location.href = '/results.html?data=' + encodeURIComponent(JSON.stringify(data));
        }
    </script>
</body>
</html>

后端（Node.js + Express + MySQL）

const express = require('express');
const mysql = require('mysql');
const app = express();
app.use(express.json());

const db = mysql.createConnection({
    host: 'localhost',
    user: 'user',
    password: 'password',
    database: 'database_name'
});

db.connect(err => {
    if (err) throw err;
    console.log('Database connected!');
});

app.post('/api/search', (req, res) => {
    const query = req.body.query;
    const sql = `SELECT * FROM table_name WHERE column_name LIKE '%${query}%'`;
    db.query(sql, (err, results) => {
        if (err) throw err;
        res.json(results);
    });
});

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

结果页面（results.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Results</title>
</head>
<body>
    <h1>Search Results</h1>
    <ul id="results"></ul>

    <script>
        const data = JSON.parse(decodeURIComponent(new URLSearchParams(window.location.search).get('data')));
        const resultsList = document.getElementById('results');
        data.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item.column_name;
            resultsList.appendChild(li);
        });
    </script>
</body>
</html>