跨 html、js 和 python flask 发送表单数据

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'}
        ]
        })
    })
});

当我现在在 HTML 文件 Flask 样式 ({{ summary }}) 中显示变量“summary”时，它表明数据确实已正确发送到 HTML 文件。

我的问题是我需要 JS 文件中的信息，而不是 HTML 文件，以便使用 DataTables 很好地呈现它。

我尝试通过另一个 AJAX 调用来获取数据，但这只会从 Flask 返回 dict，而没有任何表单数据。我相信我并不真正了解数据在文件之间的流动方式。它适用于我在提交时使用preventDefault() 的其他示例，但它应该是一个单独的/summary HTML 文件..

以下帖子似乎相关但对我没有帮助：

• Sending data from HTML form to a Python script in Flask
• Send form data using jquery 'ajax' and html form 'action'
• sending html form data to node 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'}
        ]
        })