从烧瓶/python调用Javascript函数答案

【问题标题】：Calling a Javascript function from flask / python从烧瓶/python调用Javascript函数
【发布时间】：2018-02-22 13:10:48
【问题描述】：

我非常了解 Python，但我对 web-stuff 和 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 函数？

非常感谢！

【问题讨论】：

相关/重复 - stackoverflow.com/questions/298772/…
网上有很多关于ajax如何工作的教程和文章。这真的不是几句话就能解释的。对于像这样简单的东西，您将使用回调函数。所以你几乎可以把它看作是把函数传递给数据，而不是把数据传递给函数。

标签： javascript python flask

【解决方案1】：

看到这个link 你可以使用ajax 来加载表格而不刷新页面。

您可以使用 flask jsonify 从您的烧瓶应用程序中返回 json。请参阅此 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
}

【讨论】：

如果您希望能够在不知道何时发送新数据的情况下将新数据推送到已打开的页面，您可能还需要使用 websockets。

【解决方案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)

你的客户端在 javascript 端，使用 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) 和服务器端 (蟒蛇）。

【讨论】：