Колба: как обновить div после обработки ввода формы - PullRequest
0 голосов
/ 15 сентября 2018

Приложение My Flask выполняет расчеты на основе входных данных формы пользователя.Эти вычисления занимают около 10 секунд.Вывод этих вычислений должен отображаться в div на той же странице, рядом с формой (в диаграмме / таблице и т. Д.).

Я пробовал два подхода.Первый, используя обычный Flask, перезагружает всю страницу, что далеко от идеала.Второй подход, использующий Sijax, обновляет только div.Но в этом случае я не знаю, как получить доступ к входам формы.

Я запутался, как заставить это работать.Буду признателен за любые указания!

Подход 1: просто фляжка (оборотная сторона: перезагружается вся страница)

form_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testpage</title>
</head>
<body>
    <form  action="{{ url_for('do_the_math') }}" method="post">
        A = <input type="number" name="input_A">
        B = <input type="number" name="input_B">
        <input type="submit" value="Submit">
    </form>
<div id="destination_div">A + B = {{ result }}</div>
</body>
</html>

app_normal.py:

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route("/")
def show_home():
    return render_template("form_test.html", result='unknown yet')

@app.route("/do_the_math", methods=['POST'])
def do_the_math():
    A = request.form.get('input_A')
    B = request.form.get('input_B')
    sum = float(A) + float(B)

    # reloads whole page
    return render_template("form_test.html", result=sum)

    # what i want: reload just update destination_div with new HTML
    # return render_template("#destination_div", "A + B = " + str(sum))

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

Подход 2: использовать Sijax (обновляет div, но как получить доступ к входам формы?)

form_test_sijax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testpage with sijax</title>
    <script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</head>
<body>
    <form method="post">
        A = <input type="number" name="input_A">
        B = <input type="number" name="input_B">
        <button type="button" onclick="Sijax.request('submit_form');">calc</button>
    </form>
<div id="destination_div">A + B = unknown</div>
</body>
</html>

app_sijax.py

from flask import Flask, render_template, g
import flask_sijax
import os

app = Flask(__name__)

# init sijax
app.config["SIJAX_STATIC_PATH"] = os.path.join('.', os.path.dirname(__file__), 'static/js/sijax/')
app.config["SIJAX_JSON_URI"] = '/static/js/sijax/json2.js'
flask_sijax.Sijax(app)


def submit_form_handler(obj_response):
    A = 5  # how do get to the values entered in the form?
    B = 3
    sum = A + B
    obj_response.html("#destination_div", "A + B = " + str(sum))


@flask_sijax.route(app, "/")
def show_home():
    result = 'unknown'
    if g.sijax.is_sijax_request:
        g.sijax.register_callback('submit_form', submit_form_handler)
        return g.sijax.process_request()
    return render_template("form_test_sijax.html")


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

1 Ответ

0 голосов
/ 15 сентября 2018

Вы можете использовать ajax с jquery для динамического обновления страницы с вычисленным результатом без необходимости обновления страницы:

В html-файле:

<html>
  <header>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </header>
 <body>
    <div class='wrapper'>
      A = <input type="number" id="input_A">
      B = <input type="number" id="input_B">
      <button class='get_result'>Calculate</button>
      <div class='result'></div>
    </div>
 </body>
 <script>
    $(document).ready(function(){
      $('.wrapper').on('click', '.get_result', function(){
         var val1 = $("#input_A").val();
         var val2 = $("#input_B").val();
         $.ajax({
          url: "/calculate_result",
          type: "get",
          data: {val1: val1, val2:val2},
          success: function(response) {
            $(".result").html('<p>'+response.result.toString()+'</p>');
          },
         });
      });
    });
 </script>
</html>

Тогда, в главном файле приложения создайте маршрут для расчета конечного результата:

@app.route('/calculate_result')
def calculate_result():
  a = int(flask.request.args.get('val1'))
  b = int(flask.request.args.get('val2'))
  return flask.jsonify({"result":a+b})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...