获取用户输入和输出 Flask 和 HTML答案

【问题标题】：Get user input and output Flask and HTML获取用户输入和输出 Flask 和 HTML
【发布时间】：2020-04-25 10:23:24
【问题描述】：

我正在尝试使用 Flask 和 HTML 开发一个网络应用程序，现在我需要获取用户输入，将其传递给 Python 后端，执行一个函数并返回其输出，将其放置在 HTML 中元素。我也希望在不刷新 HTML 页面的情况下发生这种情况。

我该怎么做？贝娄我有我到目前为止开发的代码，但它不能正常工作：

我的 HTML：

           <div id="ThroughputRate" class="data_entry">
                <form action="{{ url_for('background_check_throughputrate') }}" method="post">
                    <input name="throughput_rate_text" class="input_box">
                    <input id="checkThroughputRate" type="submit" class='new-button-data' value="Check Throughput Rate">
                    <output name="throughputRateResult" class="result_box" ></output>
                </form>
            </div>

我的 Flask 后端：


@app.route('/background_check_throughputrate', methods=['GET', 'POST'])
def background_check_throughputrate():
    if request.method == 'POST':
        text = request.form['throughput_rate_text']
        processed_text = str(text)
        throughput = transition_throughput_rate(processed_text)
        return jsonify(throughput)

我的 HTML（继续获取在 Flask 上执行的函数的输出）：

    <script type=text/javascript>
            $(function() {
              $('a#checkThroughputRate').bind('click', function() {
                $.getJSON('/background_check_throughputrate', function(data) {
                  console.log(data);
                  document.getElementById('throughputRateResult').innerHTML = data;
                });
                return false;
              });
            });
    </script>

我的执行背后的想法是，用户使用第一个 sn-p 代码（在 HTML 中）插入输入，这个输入被传递到第二个 sn-p 代码（在烧瓶中），最后，输出函数的 sn-p 被传递到代码的最后一个 sn-p 中（在 HTML 中的 JS 中），以便它可以显示在相应的 HTML 元素上。

到目前为止，输入在烧瓶中被正确处理，但问题是当函数返回 jsonify 时，它出现在屏幕上，而不是发送到前端。我究竟做错了什么？

谢谢大家

【问题讨论】：

标签： javascript python html python-3.x flask

【解决方案1】：

$.getJSON 旨在使用 GET 请求从端点加载 JSON 数据，但是，您的 Python 代码示例仅响应 POST 请求。

这是工作代码：

HTML

<div id="ThroughputRate" class="data_entry">
    <form action="{{ url_for('background_check_throughputrate') }}" method="post" id="throughputRateForm" enctype="multipart/form-data">
        <input name="throughput_rate_text" class="input_box">
        <input id="checkThroughputRate" type="submit" class='new-button-data' value="Check Throughput Rate">
        <output id="throughputRateResult" class="result_box" ></output>
    </form>
</div>

Python

@app.route('/background_check_throughputrate', methods=['GET', 'POST'])
def background_check_throughputrate():
    if request.method == 'POST':
        text = request.form['throughput_rate_text']
        processed_text = str(text)
        throughput = transition_throughput_rate(processed_text)
        return jsonify(throughput)

JavaScript

<script type="text/javascript">
    $(function () {
        $('#throughputRateForm').on('submit', function (e) {
            e.preventDefault();

            var form = $(this)[0];
            var formData = new FormData(form);

            $.ajax({
                url: '/background_check_throughputrate',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data);
                    document.getElementById('throughputRateResult').innerHTML = data;
                }
            });
        });
    });
</script>

此外，此代码盲目地信任用户输入并将其显示在网页上，这可能导致跨站脚本 (XSS)，这是不好的！

在显示用户输入时避免使用innerHTML 属性，因为它可用于注入恶意HTML 标签（例如<script>），我强烈建议改用innerText 属性。

【讨论】：

非常感谢！ :)