Flask POST请求表单数据，无需刷新页面

Question

我正在构建一个小型 Web 应用程序，允许用户通过几个表单输入字段（例如日期、交易金额、描述等）输入交易。每次用户单击“提交”按钮时，都会创建一个新的表行，每个输入字段有一列。除了构建此表之外，我还希望将输入数据发送到我的 Flask 应用程序。

我遇到的问题是，当用户单击“提交”时，页面刷新并且所有表行都消失了。我尝试的解决方案是只使用一个<button type="button"></button>带有 id 的标签，当用户单击它时，我的 Javascript 代码会添加一个表行而不刷新页面。但是，这不起作用，因为它不会将数据发送到我的 Flask 应用程序。我也尝试在 Javascript 中使用，sessionStorage.setItem但我不知道如何使其与我的特定代码一起工作，因为用户可以单击按钮 3 次以进行 3 个不同的事务，并且每次页面都会刷新。

所以我的问题是，如何在页面上创建和显示表格行，同时还将表单输入数据发送到我的 Flask 应用程序？

为了简单起见，我在这里只包含了 2 个输入字段，但实际上有 8 个。

HTML：

<form method="POST">
  <div class="list-group-item">
    <label>Date</label>
    <input class="form-control" id="datepicker" type="text" name=expDate value="">
  </div>
  <div class="list-group-item">
    <label>Amount Withdrawn</label>
    <input class="form-control" id="withAmount" type="text" name=expAmountWith value="">
  </div>
  <button id="submit-btn" type="submit" class="btn btn-light submit-btn">Submit</button>
</form>

JavaScript：

d3.selectAll('#submit-btn').on('click', buildTable);

function buildTable() {
    var dateInput = d3.select('#datepicker').property('value');
    var withAmount = d3.select('#withAmount').property('value');

    var tableArray = []
    tableArray.push(dateInput, withAmount)

    var row = d3.select('tbody').append('tr');

    tableArray.forEach(function(x) {

        var cell = row.append('td');
        cell.text(x);
    });

};

Python：

app = Flask(__name__)

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

    form = request.form

    if request.method == 'POST':
        expDate = request.form['expDate']
        expAmountWith = request.form['expAmountWith']

    return render_template('index.html', form=form)

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

Answer 1

您可以首先在 JavaScript 代码中获取表单元素，通过分配 id 并使用getElementById，或者以与代码的其余部分更一致的方式（看到您正在使用 jQuery，但我更喜欢 vanilla JS）。然后，<button type="button">您可以将事件侦听器附加到表单的submit事件，而不是preventDefault使用 ，这样页面就不会刷新，并将数据发送到回调内的后端。这是一个例子：

form.addEventListener('submit', function(event) {
    event.preventDefault();    // prevent page from refreshing
    const formData = new FormData(form);  // grab the data inside the form fields
    fetch('/', {   // assuming the backend is hosted on the same server
        method: 'POST',
        body: formData,
    }).then(function(response) {
        // do something with the response if needed.
        // If you want the table to be built only after the backend handles the request and replies, call buildTable() here.
    });
});

我建议formData在buildTable()函数中使用相同的对象，这样您就不必为每个元素分配 ID 并以这种方式检索值，而是使用formData.get(name).

另外，更改您的 Python 函数以在分支末尾返回某些内容，if request.method == 'POST'这样它就不会将 HTML 返回到 AJAX 请求。也许“204 - 无内容”适合您的简单情况。

我相信你知道如何用 jQuery 替换这里的普通 JS