将javascript函数返回的数据发送到Flask后端

Question

我有一个简单的javascript函数，它在单击按钮时执行，我想将该函数中的一些数据发送到Flask后端。

我最初的想法是：

function sendDataToBacked() {
data = "I want to send this to backend"
document.getElementById("myButton").value = data;
}

我将按钮值设置为"data"，然后用一个表单将该值发送到后端，如下所示。

<form id="myForm" method="POST"></form>
<button form="myForm" id="myButton" name="button" onclick="sendDataToBacked()">Send</button>

最后，python后端看起来是这样的：

@app.route("/", methods=['GET', 'POST'])
def index():
if request.method == 'POST':
print(request.form['button'])
return render_template("index.html")

但它不起作用：(知道我如何用纯javascript实现这一点吗？(我知道你可以用AJAX(

Answer 1

<button>必须在<form></form>内部才能发送。

<form method="POST">
<button id="myButton" name="button" onclick="sendDataToBacked()">Send</button>
</form>

如果你想发送其他值，那么你也必须把它们放在<form></form>中

---

您可能在同一页面上有许多表单，每个表单都需要自己的按钮来发送它，因此表单必须知道哪个按钮属于表单。

---

最小工作示例

from flask import Flask, request, render_template_string
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
print(request.form)
return render_template_string('''
<script>
function sendDataToBacked() {
data = "I want to send this to backend";
document.getElementById("myButton").value = data;
}
</script>
<form method="POST">
<button id="myButton" name="button" onclick="sendDataToBacked()">Send</button>
</form>
''')
app.run()

但此代码也将重新加载页面。如果你想在不重新加载的情况下发送它，那么你必须学习AJAX。

---

编辑：与AJAX相同，使用现代方法fetch而不是旧的XMLHttpRequest或外部库jQuery

from flask import Flask, request, render_template_string, jsonify
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
print(request.form)
return render_template_string('''
<script>
function sendDataToBackendAjax(event) {
// create own form in memory
const formData = new FormData();
// set values in this form
formData.append("button", "I want to send this to backend");
fetch("/ajax", {
method: "POST",
body: formData
//headers: {'Content-Type': 'application/json'},
//body: JSON.stringify(formData)
})
.then(function(response){
data = response.json();  // get result from server as JSON
//alert(data);
return data; 
})
.then(function(data){ 
alert(data.info);
console.log(data);
})
.catch((error) => {
console.error('Error:', error);
});

event.preventDefault(); // don't send in normal way and don't reload page
}
</script>
<form method="POST" action="/ajax">
<button id="myButton" name="button" onclick="sendDataToBackendAjax(event)">Send Ajax</button>
</form>
''')
@app.route('/ajax', methods=['GET', 'POST'])
def ajax():
print(request.form)
return jsonify({'result': 'OK', 'info': 'Hello World!'})  # send result to browser as JSON
app.run()  #debug=True 

Answer 2

我写了一个有两个按钮的例子，第一个按钮自己进行提交并将数据发送到后端，第二个按钮调用一个函数并进行提交。我已经使用list(request.form.keys())[0]来确定哪个按钮正在进行提交。

后端：

@app.route("/", methods=['GET', 'POST'])
def index():
if request.method == 'POST':
if list(request.form.keys())[0] == 'button':
print(request.form['button'])
if list(request.form.keys())[0] == 'button2':
print(request.form['button2'])
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)

前端：

<form action="" method="post" id='myForm'>
<button name="button" value="value">Send</button>
</form>
<form action="" method="post" id='myForm2'>
<button id="myButton2" name="button2" value=0 onclick="modifyData()">Send</button>
</form>
<script>
function modifyData() {
data = "I want to send this to backend"
document.getElementById("myButton2").value = data;
}
</script>