Отправить данные формы через HTML, JS и Python колбу

Question

У меня есть просто HTML-форма, например, так:

  <form id="new_order" method="post" action="{{ url_for('summary') }}">
    <div class="form-group col-sm" id="fruit">
      <input type="number" class="form-control" name="fruit_quantity" id="fruit_quantity" required>fruit_quantity<br>
      <input type="text" class="form-control" name="fruit_name" id="fruit_name">fruit_name<br>
      <button type="submit" class="btn btn-primary" form="new_order" id="new_order_summary">Summarise</button>
      ( ... ) //more entries possible
  </form>

Я использую Python Flask для извлечения данных формы и работы с ними:

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

    fruit = request.form.get('fruit_name')
    summary.append({'fruit_name': fruit})

    quantity = request.form.get('fruit_quantity')
    summary.append({'fruit_quantity': fruit_quantity})

    summary = json.dumps(summary)

    return  render_template('fruit_summary.html'
                            , summary= summary
                            )

Идея состояла в том, чтобы открыть вторую HTML-страницу для отображения итоговых результатов с помощью плагина jQuery DataTables .

// 2nd HTML file
<div>
  <table id="summary_table" class="responsive display">
  </table>
</div>

//JS file
$('#new_order').submit( function (data) {
    // check that the new page loaded
    $('#summary_table').ready( function () {

        // this won't show anything, unfortunately..
        console.log(data);

        $('#summary_table').DataTables({
        data: data
        , columns: [
                {data: 'fruit_name', title: 'fruit_name'},
                {data: 'fruit_quantity', title: 'fruit_quantity'}
        ]
        })
    })
});

Когда я теперь показываю переменную 'summary' в HTML-файле в стиле Flask ({{ summary }}), это показывает, что данные действительно отправляются в HTML-файл правильно.

Моя проблема в том, что мне нужна эта информация в файле JS, а не в HTML-файле, чтобы она хорошо отображалась с использованием DataTables.

Я пытался получить данные с помощью другого вызова AJAX, но это просто вернуло бы голос из Flask без каких-либо данных формы. Я считаю, что я не очень понимаю, как данные передаются между файлами. Это работает в других примерах, где я использую preventDefault() при отправке, но это должен быть отдельный /summary HTML-файл ..

Следующие сообщения кажутся связанными, но не помогли мне:

• Отправка данных из формы HTML в скрипт Python во Flask
• Отправка данных формы с использованием jquery «ajax» и HTML-формы «action»
• отправка данных html-формы на узел js

Answer 1

Удалить событие отправки, передать данные из переменной php в переменную javascript

$('#summary_table').ready( function () {

        var data = JSON.parse('{{ summary }}');

        $('#summary_table').DataTables({
        data: data
        , columns: [
                {data: 'fruit_name', title: 'fruit_name'},
                {data: 'fruit_quantity', title: 'fruit_quantity'}
        ]
        })