Получить пользовательский ввод и вывод Flask и HTML

Question

Я пытаюсь разработать веб-приложение с 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)

My 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>

Идея моего выполнения заключается в том, что пользователь использует первый фрагмент кода (в HTML) для вставки ввода этот вход передается во второй фрагмент кода (в flask) и, наконец, вывод функции передается в последний фрагмент кода (в JS внутри HTML) чтобы его можно было отобразить на соответствующем элементе HTML.

Пока что входные данные правильно обрабатываются внутри flask, но проблема в том, что когда функция возвращает jsonify, она появляется на экране вместо того, чтобы отправлять ее во внешний интерфейс. Что я делаю неправильно?

Спасибо всем

Answer 1

$.getJSON предназначен для загрузки данных JSON из конечной точки с помощью GET-запроса, однако пример кода 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.