如何显示数据库的内容而不需要刷新(Flask,Sqlite,Python)

3mpgtkmj  于 2023-06-23  发布在  SQLite
关注(0)|答案(1)|浏览(131)

我用一个按钮触发的测试函数保存llm的输出。当点击相同的按钮时,我不仅希望保存数据,而且还希望立即显示这些数据,而无需刷新页面-这是现在必须的。
这是测试函数(在www.example.com中)llm.py)

def test(output):
    data = json.loads(output)
    label = data['label']
    explanation = data['explanation']
    etymology = data['etymology']
    example = data['example']
    connection = sqlite3.connect('database.db')
    cur = connection.cursor()
    cur.execute("INSERT INTO emotions (label, explanation, etymology, example) VALUES (?, ?, ?, ?)",(label, explanation, etymology, example))
    connection.commit()
    connection.close()
    print(data)

该函数将llm的输出存储在数据库“情绪”中。在我的主页上显示的界面(Gradio)在我的www.example.com(一个Flask应用程序)中有这样的路由app.py (a Flask app)

@app.route('/')
def index():
    conn = get_db_connection()
    emotions = conn.execute('SELECT * FROM emotions ORDER BY id DESC').fetchall()
    conn.close()
    return render_template('index.tpl', gradioserver_url='http://127.0.0.1:7860', emotions=emotions)

我不知道如何使这些数据在我的主页上可见而不刷新它们。更糟的是:我不知道你需要什么进一步的信息。下面是index.tpl中的渲染:

<iframe
  src="{{ gradioserver_url }}"
  width="100%"
  height="400"
  frameborder="0"
></iframe>
<h2>This is what others feel. And maybe you</h2>
<div class="emotions-container">
  {% for emotion in emotions %}
  <div class='emo'>
    <h2>{{ emotion['label'] }}</h2>
    <p>{{ emotion['example'] }}</p>
    <p>{{ emotion['explanation'] }}</p>
    <p>{{ emotion['etymology'] }}</p>
  </div>
  {% endfor %}

有人告诉我,AJAX可能是解决方案。我查了一下她的意思--但这实际上超出了我的范围。谢谢你的时间和帮助。
编辑:正如有人善意地评论,我试图从这条“路线”开始,但我充其量有“四分之一的知识”关于张贴/获取的一部分生活。我尝试在我的index. tpl中构建一个异步函数,它是我的flask路由的渲染文件:
我这样做了:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:5000/', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify(data));

控制台显示“未定义数据”。但是data是来自测试函数中定义的llm输出的JSON格式。这是其中的一部分:

def test(output):
    data = json.loads(output)

所以问题是,这个数据变量没有连接到AJAX(?)部分在index.tpl。但正如我所说,我是新来的。内容保存在数据库中,刷新页面时显示在屏幕上。但不是异步的。(我部分理解AJAX代码-所以我注解掉了xhr.send(JSON.stringify(data));部分,期望在我的Gradio界面中点击保存按钮时xhr.responseText会显示在控制台中。这是www.example.com中的哪一部分llm.py:

btn_save = gr.Button(value="Save Emotion")
        btn_save.click(test, inputs=[emo_out], outputs=emo_out)

但什么也没发生。

kd3sttzy

kd3sttzy1#

为了在页面上显示动态数据,可以考虑使用一种API端点来返回您想要显示的数据。
在前端方面,这取决于您使用的技术:
以下是几个选项:
1.使用React.js,这是现代UI的一个很棒的工具,并用它编写fetch函数
1.使用原始Javascript并编写一个函数,例如,每5秒从API获取数据,然后在网页上更新它。
1.使用AJAX异步调用(这个选项有点旧,我个人不推荐使用)

相关问题