【详解】textarea从数据库调取数据

原创

大盘鸡拌面

发布于 2025-09-03 20:31:59

3760

textarea从数据库调取数据

在Web开发中，textarea 是一个常用的HTML元素，用于多行文本输入。本文将介绍如何通过JavaScript从后端数据库中获取数据，并将其填充到 textarea 中。我们将使用一个简单的示例来说明整个过程，包括前端和后端的实现。

前端实现

HTML结构

首先，我们需要在HTML页面中创建一个 textarea 元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea 从数据库调取数据</title>
</head>
<body>
    <h1>从数据库加载数据</h1>
    <textarea id="dataTextArea" rows="10" cols="50"></textarea>
    <button onclick="loadData()">加载数据</button>

    <script src="app.js"></script>
</body>
</html>

JavaScript逻辑

接下来，我们在 app.js 文件中编写JavaScript代码，用于发送请求并处理响应：

function loadData() {
    fetch('/api/get-data')
        .then(response => response.json())
        .then(data => {
            document.getElementById('dataTextArea').value = data.content;
        })
        .catch(error => console.error('Error:', error));
}

后端实现

为了简化示例，我们使用Node.js和Express框架来构建后端服务。假设我们有一个简单的数据库表，其中包含一个字段 content。

安装依赖

首先，确保你已经安装了Node.js。然后，在项目目录下初始化一个新的Node.js项目并安装Express：

npm init -y
npm install express

创建服务器

在项目根目录下创建一个 server.js 文件，并编写以下代码：

const express = require('express');
const app = express();
const PORT = 3000;

// 模拟数据库数据
const mockData = {
    content: '这是从数据库中获取的数据。'
};

app.get('/api/get-data', (req, res) => {
    res.json(mockData);
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

运行服务器

在终端中运行以下命令启动服务器：

node server.js

测试

打开浏览器，访问 http://localhost:3000，点击“加载数据”按钮，你应该能看到 textarea 中显示从后端获取的数据。

下面我将提供一个简单的示例，展示如何从数据库中获取数据并填充到HTML页面中的<textarea>元素。这个示例将使用Python的Flask框架和SQLite数据库。

1. 创建数据库和表

首先，我们需要创建一个SQLite数据库，并在其中创建一个表来存储一些文本数据。

import sqlite3

# 连接到SQLite数据库（如果不存在则会自动创建）
conn = sqlite3.connect('example.db')
cursor = conn.cursor()

# 创建一个表
cursor.execute('''
CREATE TABLE IF NOT EXISTS texts (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    content TEXT NOT NULL
)
''')

# 插入一些示例数据
cursor.execute("INSERT INTO texts (content) VALUES ('这是一个示例文本')")
cursor.execute("INSERT INTO texts (content) VALUES ('这是另一个示例文本')")

# 提交事务
conn.commit()

# 关闭连接
conn.close()

2. 创建Flask应用

接下来，我们创建一个Flask应用，该应用将从数据库中读取数据并将其显示在HTML页面的<textarea>中。

from flask import Flask, render_template, request
import sqlite3

app = Flask(__name__)

@app.route('/')
def index():
    # 连接到数据库
    conn = sqlite3.connect('example.db')
    cursor = conn.cursor()

    # 查询所有记录
    cursor.execute("SELECT id, content FROM texts")
    rows = cursor.fetchall()

    # 关闭连接
    conn.close()

    return render_template('index.html', rows=rows)

if __name__ == '__main__':
    app.run(debug=True)

3. 创建HTML模板

最后，我们创建一个HTML模板文件 templates/index.html，用于显示从数据库中获取的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Example</title>
</head>
<body>
    <h1>从数据库加载数据到Textarea</h1>
    <form method="post">
        <select name="text_id">
            {% for row in rows %}
                <option value="{{ row[0] }}">{{ row[0] }}: {{ row[1] }}</option>
            {% endfor %}
        </select>
        <button type="submit">加载</button>
    </form>

    {% if selected_text %}
        <h2>加载的文本:</h2>
        <textarea rows="10" cols="50">{{ selected_text }}</textarea>
    {% endif %}
</body>
</html>

4. 处理表单提交

为了处理表单提交并显示选中的文本，我们需要修改Flask应用以支持POST请求。

from flask import Flask, render_template, request
import sqlite3

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    # 连接到数据库
    conn = sqlite3.connect('example.db')
    cursor = conn.cursor()

    # 查询所有记录
    cursor.execute("SELECT id, content FROM texts")
    rows = cursor.fetchall()

    selected_text = None

    if request.method == 'POST':
        text_id = request.form.get('text_id')
        if text_id:
            cursor.execute("SELECT content FROM texts WHERE id=?", (text_id,))
            result = cursor.fetchone()
            if result:
                selected_text = result[0]

    # 关闭连接
    conn.close()

    return render_template('index.html', rows=rows, selected_text=selected_text)

if __name__ == '__main__':
    app.run(debug=True)

5. 运行应用

现在，你可以运行Flask应用并访问 http://127.0.0.1:5000/ 来查看效果。选择一个选项后，点击“加载”按钮，相应的文本将显示在<textarea>中。

python app.py

当需要从数据库中加载数据到 textarea 时，通常会涉及到后端编程语言（如 PHP、Python、Node.js 等）和前端JavaScript的结合使用。下面我将通过一个简单的示例来说明如何从数据库中获取数据并显示在 textarea 中。

示例：使用PHP和MySQL

假设我们有一个简单的表单，其中包含一个 textarea，我们希望从MySQL数据库中加载一些文本内容到这个 textarea 中。

1. 创建数据库和表

首先，确保你有一个MySQL数据库，并且已经创建了一个表来存储文本数据。例如：

CREATE DATABASE exampledb;
USE exampledb;

CREATE TABLE texts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content TEXT NOT NULL
);

INSERT INTO texts (content) VALUES ('这是一个示例文本。');

2. 创建PHP文件来处理数据请求

接下来，创建一个PHP文件（例如 load_text.php），该文件负责从数据库中查询数据并将其发送回前端。

<?php
// 数据库配置
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "exampledb";

// 创建连接
$conn = new mysqli($servername, $username, $.password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询数据
$sql = "SELECT content FROM texts WHERE id = 1";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo $row["content"];
    }
} else {
    echo "0 结果";
}
$conn->close();
?>

3. 创建HTML文件并使用JavaScript加载数据

最后，创建一个HTML文件（例如 index.html），并在其中使用JavaScript来调用PHP脚本并将返回的数据填充到 textarea 中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load Text from Database</title>
</head>
<body>
    <form>
        <textarea id="textArea" rows="10" cols="50"></textarea>
    </form>

    <script>
        // 使用AJAX加载数据
        function loadText() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('textArea').value = xhr.responseText;
                }
            };
            xhr.open("GET", "load_text.php", true);
            xhr.send();
        }

        // 页面加载完成后执行函数
        window.onload = loadText;
    </script>
</body>
</html>

解释

数据库部分：我们在MySQL中创建了一个名为 texts 的表，并插入了一条记录。
PHP部分：load_text.php 脚本连接到数据库，查询 id 为1的记录，并输出其 content 字段的内容。
HTML和JavaScript部分：index.html 文件包含一个 textarea 和一个简单的JavaScript函数 loadText，该函数使用AJAX技术从 load_text.php 获取数据，并将其设置为 textarea 的值。页面加载完成后自动调用 loadText 函数。

这个例子展示了如何从数据库中加载数据并动态地显示在网页上的 textarea 中。你可以根据实际需求调整数据库查询和前端展示逻辑。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#自选日志