Javascript 保留POST请求表单数据而不刷新页面

我正在构建一个小型web应用程序，允许用户通过两个表单输入字段（如日期、交易金额、描述等）输入交易。。每次用户单击submit按钮时，将为每个输入字段创建一个新的表行，其中包含一列。除了构建此表之外，我还希望将输入数据发送到我的Flask应用程序

我遇到的问题是，当用户单击submit时，页面刷新，所有表行都消失了。我为此尝试的解决方案是只使用一个id标记，当用户单击它时，我的Javascript代码会添加一个表行，而不会刷新页面。但是，这不起作用，因为它不会将数据发送到我的Flask应用程序。我还尝试在Javascript中使用sessionStorage.setItem，但我不知道如何使用我的特定代码，因为用户可以为3个不同的事务单击按钮3次，每次页面都会刷新

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

为了简化，我在这里只包含了2个输入字段，但有8个

HTML:

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)

---

因此，为了做到这一点，您需要使用ajax请求

d3.selectAll('#submit-btn').on('click', buildTable);
$.post( "/your-url", function( data ) { // data is the variable that the URL returns (that means you can't return render_template you have to return some raw data e.g string, json, int, etc)
     buildTable.append(data);
  });

---

我不知道你到底需要添加什么，所以我临时做了。您需要做的是将您在数据中发送的任何内容附加到表中—看起来您已经知道如何在JQuery中执行此操作了。我建议数据应该是JSON或列表。有关如何使用ajax post请求的更多信息，可以从JavaScript代码中获取表单元素开始，通过分配id和使用getElementById，或者以与使用jQuery时代码其余部分更一致的方式开始，但我更喜欢vanilla JS。然后，您可以将事件监听器附加到窗体的事件，而不是使用，然后使用默认设置，这样页面就不会刷新，并将数据发送到回调内的后端。以下是一个例子：

form.addEventListener'submit'，functionevent{ event.preventDefault；//防止页面刷新 const formData=new FormDataform；//获取表单字段中的数据 获取“/”，{//假定后端托管在同一服务器上 方法：“POST”， 正文：formData， }.Then函数响应{ //如果需要，对响应做些什么。 //如果您希望仅在后端处理请求和回复后构建表，请在此处调用buildTable。 }; }; 我建议在buildTable函数中使用相同的formData对象，这样就不必为每个元素分配ID并以这种方式检索值，而是使用formData.getname

另外，更改Python函数以在if request.method=='POST'分支的末尾返回一些内容，这样它就不会将HTML返回到AJAX请求。也许在你的简单案例中，204-No内容是合适的

---

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

使用ajax，仅此而已，只需添加数据即可。如果这就是你的意思，告诉我，我可以上传答案是的，我只是还不太熟悉ajax。如果你能展示如何用ajax解决我的问题，那将非常有帮助。看看这个。很好地解释了解决方案并给出了一个例子！投票支持我！请解释这是如何工作的，以及这将如何帮助remeco。@Spacehold除了他已经接受了一个答案之外，还有什么需要解释的呢？我觉得我的答案很好。答案中有一个链接解释了更多关于ajax.post的内容。

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)

d3.selectAll('#submit-btn').on('click', buildTable);
$.post( "/your-url", function( data ) { // data is the variable that the URL returns (that means you can't return render_template you have to return some raw data e.g string, json, int, etc)
     buildTable.append(data);
  });