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中返回字典，而没有任何表单数据。我相信我不太了解文件之间的数据流向。在其他示例中，我在提交时使用preventDefault()，但它应该是单独的/summary HTML文件。

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

Answer 1

删除Submit事件，将数据从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'}
        ]
        })

通过html，js和python flask发送表单数据

1 个答案: