使用 JS 将用户输入从 HTML 传递到 Flask答案

【问题标题】：Pass user input from HTML to Flask with JS使用 JS 将用户输入从 HTML 传递到 Flask
【发布时间】：2021-10-04 16:29:16
【问题描述】：

我创建了一个 JS，它在单击按钮时创建 2 个用户输入字段，然后将显示在 html 页面上。我希望在将 2 个输入创建到烧瓶应用程序后传递它们。我把一切都安排妥当了，但似乎没有任何工作。

我应该以其他方式引用输入字段吗？我很困惑，非常感谢一些指导。

请在下面找到我的代码

main.py

import sys
from flask import request, render_template, Flask, session, redirect, url_for

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hjshjhdjah kjshkjdhjs'

@app.route('/', methods=['GET', 'POST'])
def inputNum():
    if request.method == 'POST':
        num1 = request.form.get("num0")
        session["num1"] = num1
        num2 = request.form.get("num1")
        session["num2"] = num2
        print(session["num1"])
        return redirect(url_for("results"))
    return render_template("inputNum.html")

@app.route('/results')
def results():
    if "num1" and "num2" in session:
        num1 = session["num1"]
        num2 = session["num2"]
        old_stdout = sys.stdout
        log_file = open("message.log", "w")
        sys.stdout = log_file
        addNum(num1, num2)
        sys.stdout = old_stdout
        log_file.close()
        with open("message.log", "r") as f:
            content = f.read()
        return app.response_class(content, mimetype='text/plain')
    else:
        return redirect(url_for('inputNum'))

def addNum(num1, num2):
    num1 = int(num1)
    num2 = int(num2)
    sum = num1 + num2
    print(sum)

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

inputFields.js

var num = 2; // ads 2 fields at a time

var createInputs = function () {
  $("#ip_div").append('<form id="form"></form>');
  for (var i = 0; i < num; i++) {
    $("#form").append("<input></input>");
  }
};

$("#btn").click(function () {
  createInputs();
  //create unique ID for each input
  $("#form")
    .find("input")
    .each(function (i) {
      $(this).attr("type", "number");
      $(this).attr("name", "num" + i);
      $(this).attr("id", "num" + i);
      $(this).attr("placeholder", "number" + i);
    });
});

inputNum.html

<button id="btn"> Add new fields </button>
  <div id="ip_div"> <form action="{{ url_for("inputNum")}}" method="post">
    
  </div>
  <br>

  <button type="submit">Submit for addition </button>
<script type=text/javascript src="{{ url_for('static', filename='jquery.js') }}"></script>
<script type=text/javascript src="{{ url_for('static', filename='inputFields.js') }}"></script>
</form>

结果.html

<!DOCTYPE html>
<title xmlns="http://www.w3.org/1999/html">
    <head>
        <meta http-equiv="refresh" content="10">
        <title>Results</title>
    </head>
    <body>
        <h1>Log file ...</h1>
        <script>
           // function for adjusting iframe height to log size
            function resizeIframe(obj) {
              obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
            }
          </script>
        <iframe src="{{ url_for('results') }}" frameborder="0" style="overflow:hidden;width:100%" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
    </body>
</html>

【问题讨论】：

嗨，为什么按钮不在表单中？

标签： javascript python html jquery flask

【解决方案1】：

如果您打算将来继续使用 flask 运行您的服务器，我建议您创建一个 forms.py 文件并通过 python 而不是 JS 运行您的所有表单，因为它与 flask 一起工作得更好。这是一篇很好的文章 - https://python-adv-web-apps.readthedocs.io/en/latest/flask_forms.html 创建表单后，继续阅读本文并了解如何在 results.html 文件中使用从应用程序路由继承的表单标签。

【讨论】：