如何通过Python获取指定ID的HTML元素值

我来帮你拆解实现步骤，其实核心就是前端把列表项的ID传给后端路由，后端用这个ID查询数据库，再渲染详情页面，具体操作如下：

第一步：前端绑定点击事件，传递ID到后端 #

你可以给每个ons-list-item绑定点击事件，用JS获取它的value（也就是数据库记录的ID），然后通过URL参数的方式传给Bottle的后端路由——这种方式最简单直观，适合你的场景。

在你的列表页面模板（比如items_list.html）里添加这段JavaScript：

// 给所有带itembtn ID的列表项绑定点击事件
document.querySelectorAll('#itembtn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 获取当前列表项的value值（也就是你的record[0]，数据库主键ID）
        const itemId = this.value;
        // 跳转到详情页面，把ID拼在URL里
        window.location.href = `/item-detail/${itemId}`;
    });
});

第二步：Bottle后端接收参数，查询SQLite #

在你的Python代码里，新增一个路由来接收这个ID，然后用参数化查询（一定要用这个，防止SQL注入）从SQLite里取出对应的数据：

from bottle import Bottle, render_template, request
import sqlite3

app = Bottle()

# 原来的列表展示路由
@app.route('/')
def show_item_list():
    # 连接数据库，查询所有条目
    conn = sqlite3.connect('your_db_name.db')
    cursor = conn.cursor()
    cursor.execute('SELECT id, name, description FROM your_table')  # 换成你的实际查询
    records = cursor.fetchall()
    conn.close()
    # 把数据传给列表模板
    return render_template('items_list.html', records=records)

# 新增的详情页路由，接收URL里的item_id参数
@app.route('/item-detail/<item_id>')
def show_item_detail(item_id):
    # 连接数据库，用参数化查询获取对应条目
    conn = sqlite3.connect('your_db_name.db')
    cursor = conn.cursor()
    # 用?作为占位符，绝对不要直接把item_id拼进SQL语句！
    cursor.execute('SELECT * FROM your_table WHERE id = ?', (item_id,))
    item = cursor.fetchone()  # 获取单条记录
    conn.close()
    # 把查询结果传给详情模板
    return render_template('item_detail.html', item=item)

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

第三步：创建详情页面模板 #

最后写一个详情页模板（比如item_detail.html），用来展示从数据库查到的具体信息：

<ons-page>
    <ons-toolbar>
        <div class="center">条目详情</div>
    </ons-toolbar>
    <div style="padding: 20px;">
        <p><strong>ID:</strong> {{ item[0] }}</p>
        <p><strong>名称:</strong> {{ item[1] }}</p>
        <p><strong>描述:</strong> {{ item[2] }}</p>
        <!-- 这里根据你的数据库字段对应调整即可 -->
    </div>
</ons-page>

可选：用POST方式传值（如果不想暴露ID在URL里） #

如果不想把ID显示在URL上，也可以用POST请求：

1. 前端点击事件改成提交隐藏表单：

btn.addEventListener('click', function() {
    const itemId = this.value;
    // 创建临时隐藏表单
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/item-detail';
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'item_id';
    hiddenInput.value = itemId;
    form.appendChild(hiddenInput);
    document.body.appendChild(form);
    form.submit();
});

2. 后端路由改成接收POST参数：

@app.route('/item-detail', method='POST')
def show_item_detail():
    item_id = request.forms.get('item_id')
    # 后面的查询逻辑和之前完全一样
    conn = sqlite3.connect('your_db_name.db')
    cursor = conn.cursor()
    cursor.execute('SELECT * FROM your_table WHERE id = ?', (item_id,))
    item = cursor.fetchone()
    conn.close()
    return render_template('item_detail.html', item=item)

这样就能完美实现你想要的功能啦！

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