时间戳

首页 > 解决方案 > 跨 html、js 和 python flask 发送表单数据

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

问题描述

我有一个简单的 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
                            )

想法是使用 jQuery 插件DataTables打开第二个 HTML 页面以显示汇总的水果。

// 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-style ( {{ summary }}) 中显示变量“summary”时，它表明数据确实正确地发送到了 HTML 文件。

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

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

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

标签： pythonjqueryajaxformsflask

解决方案

移除提交事件，将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'}
        ]
        })

推荐阅读