Question

我非常了解Python，但我是网络内容和JavaScript的新手。我发现了一篇关于Calling a python function from button on website (Flask)的帖子。

我想执行以下操作：我想在HTML表中添加一个新行。数据将来自Python。我已经发现刷新网站不是一个好方法，而是应该使用JavaScript。假设我有以下HTML代码：

<table class="table" id="myTable">
  <thead>
    <tr>
      <th colspan="2">This is a table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>entry 1</td>
      <td>entry 2</td>
    </tr>
  </tbody>
</table>
<script src="js/scripts.js"></script>

并在scripts.js中我有以下功能（来自链接的帖子）：

function appendRow(table_id) {
  var table_ref = document.getElementById(table_id).getElementsByTagName('tbody')[0];
  var new_row = table_ref.insertRow(table_ref.rows.length);
  var new_cell = new_row.insertCell(0);
  var new_text = document.createTextNode('New row');
  new_cell.appendChild(new_text);
}

现在无视细节如何工作/可以优化什么等等。我真正的问题是：如何从Python / flask中调用此函数？

此外：如何将数据（比如JSON结构）传递给JavaScript函数？

非常感谢提前！

Answer 1

请参阅此link，您可以使用ajax加载表而不刷新页面。

你可以使用flask jsonify从你的烧瓶app中返回json。请参阅flask doc

中的此link及以下示例

from flask import jsonify
@app.route('/_get_current_user')
def get_current_user():
    return jsonify(username=g.user.username,
                   email=g.user.email,
                   id=g.user.id)

将返回以下json

{
    "username": "admin",
    "email": "admin@localhost",
    "id": 42
}

Answer 2

您可以使用socket.io。

python实现将是服务器端的，可以使用python-socketio完成。

此代码是从localhost:5000启动套接字服务器的基本实现

import eventlet
import socketio
import json

sio = socketio.Server()
app = socketio.WSGIApp(sio)

@sio.event
def connect(sid, environ):
    print('connect ', sid)

@sio.event
async def message(sid, data):
    print("message ", data, json.loads(data))
    # send a reply to the sender client socket 
    # await sio.emit('reply', room=sid)

@sio.event
def disconnect(sid):
    print('disconnect ', sid)

if __name__ == '__main__':
    eventlet.wsgi.server(eventlet.listen(('', 5000)), app)

使用socket.io client api

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost:5000');
  var to_python = {
    title: "this is just",
    body: "sample data to send to python"
    user: {
      "name": "",
      "email": "" 
    }
  }
  socket.emit('message', JSON.stringify(to_python));
</script>

我在多个应用程序中使用了此实现，请注意， socket.io协议实现 必须在客户端（js）和服务器端（ python）。

从flask / python调用Javascript函数

2 个答案: