Calling/Invoking 来自 python 的 Javascript 函数 html 中的烧瓶函数

Question

我正在创建一个 flask 应用程序并尝试调用一个 python 函数，我想在其中调用一些关于我返回的 HTML 模板的 javascript function/code在初始 app.route('/')

如果用户做了什么，那么我调用了另一个函数，它应该调用或调用一个 js 函数我已经尝试到处寻找，但我无法理解解决方案。

这是我的代码结构：

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        #verify if the file is valid
        #here invoke js to do something (for example flash("test"))
    return '''
    <!doctype html>
    <title>Upload new File</title>
    <h1>Upload new File</h1>
    <form method=post enctype=multipart/form-data>
      <input type=file name=file>
      <input type=submit value=Upload>
    </form>
    '''

Answer 1

您可以在加载时执行 JavaScript 函数并让函数检查条件。您可以通过使用 Python 更改条件来影响此检查的结果。如果您使用 Flask 的 render_template 功能，则不必在 Python 文件中编写 HTML 代码。为了更好的可读性，我使用了此功能，但您始终可以将 HTML 代码放入 Python 代码中，就像您之前所做的那样。

您的 HTML 模板，例如命名为 upload.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upload new File</title>
</head>
<body onload="flashMessage()">
  <script>
    function flashMessage() {
      if ("{{ flash_message }}" == "True") {
        alert("[YOUR_MESSAGE_HERE]");
      }
    }
  </script>

  <h1>Upload new File</h1>
  <form method=post enctype=multipart/form-data>
    <input type=file name=file>
    <input type=submit value=Upload>
  </form>
</body>
</html>

您的 Python 代码：

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        #verify if the file is valid
        #here invoke js to do something (for example flash("test"))
        return render_template('upload.html', flash_message="True")

    return render_template('upload.html', flash_message="False")

因此，HTML 文件中的条件行将呈现为

if ("True" == "True")

或

if ("False" == "True")

取决于您是否希望显示即显消息。

Answer 2

您可以通过将参数传递给 jinja 来使用 JS 加载页面，如果满足条件则加载 js，否则不加载。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Upload new File</title>
</head>

<body>
    {% if flash_message == True %}
    <script>
        function YourFunction() {
            alert("[YOUR_MESSAGE_HERE]");
        }
    </script>
    {% endif %}

    <h1>Upload new File</h1>

    <form method=post enctype=multipart/form-data>
        <input type=file name=file>
        <input type=submit value=Upload>
    </form>
</body>

</html>

然后你可以把flash_message传给render_template 像这样

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    YOUR CODE...

    return render_template('upload.html', flash_message=True)

Calling/Invoking 来自 python 的 Javascript 函数 html 中的烧瓶函数

Calling/Invoking a Javascript function from python a flask function within html

javascript

python

function

flask

routing