如何通过异步值从html到flask使用ajax?

Question

我试图通过ajax从html到flask的两个异步值。我创建了一个简单的html，包含两个按钮和两个输入。我想通过一个单独的按钮点击传递每个变量。我得到以下消息:错误消息

HTML:

<form action="/" method="POST">
<input type="number" id="val1" name="val1" value="1">
<button type="submit" value="value1" name="btn1">Click1</button><br>
<input type="number" id="val2" name="val2" value="2">
<button type="submit" value="value2" name="btn2">Click2</button><br>
</form>

JS:

value1 = document.getElementById("val1").value;
value2 = document.getElementById("val2").value;
$.ajax({
type: 'POST',
url: "/",
data: JSON.stringify[(value1, value2)],
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function(data){}
});

PY:

@app.route('/', methods=['GET', 'POST'])
def start():
if request.method == 'POST':
if request.form['submit'] == 'value1':
data = request.get_json()
value1 = data['value1']
print(value1)
elif request.form['submit'] == 'value2':
data = request.get_json()
value2 = data['value2']
print(value2)
return render_template('index.html')

有人可以看看这个，并告诉我为什么会发生这种情况，我该如何解决它?

编辑:我改变了我的。py和。js文件，我看到了一些进展，但我仍然无法将值传递给flask…

HTML:

<form action="/" method="POST">
<input type="number" id="val1" value="25" min="25" max="35">
<button type="submit" value="value1" name="btn">Click1</button><br>
<input type="number" id="val2" name="val2" value="15" min="15" max="35">
<button type="submit" value="value2" name="btn">Click2</button><br>
</form

当我点击任何按钮时，它想要打印数据，但我总是在响应

中得到None

PY:

@app.route('/', methods=['GET', 'POST'])
def start():
if request.method == 'POST':
if request.form.get('btn') == 'value1':
data = request.get_json()
print(data)
elif request.form.get('btn') == 'value2':
data = request.get_json()
print(data)
return render_template('index.html')

JS:

var value1 = document.getElementById('val1').value;
var value2 = document.getElementById('val2').value;
$.ajax({
type: 'POST',
url: '/',
data: JSON.stringify({"A":value1}, {"B":value2}),
contentType: "application/json;charset=utf-8",
success: function(data){}
});

在我看来，问题出在。py中的部分代码:

data = request.get_json()
print(data)

当我把这个改成print(data['A'])时我得到了很多错误

或在.js中:

data: JSON.stringify({"A":value1}, {"B":value2}),

有人能帮帮我吗?

Answer 1

你好像打错了这一行:

data: JSON.stringify[(value1, value2)],

试着用:

data: JSON.stringify({value1, value2}),

Answer 2

如果你定义了两个类型为"提交"的按钮;以同样的形式他们的行为相同吗?为两者传输整个表单。如果您想要传输表单中的每个值，则拆分表单更容易单独的请求。

<form name="form-1">
<input type="number" name="number-1" value="1" />
<button type="submit">Click Me</button>
</form>
<form name="form-2">
<input type="number" name="number-2" value="2" />
<button type="submit">Click Me</button>
</form>

在一次传输中，数据以预定义的格式进行格式化。如果您将数据作为表单提交，则使用类型"application/x-www-form-urlencoded";或";多部分/formdata"。对于JSON，它是"application/JSON "

$(document).ready(function() {
// when the document has finished loading
["form[name='form-1']", "form[name='form-2']"].forEach(sel => {
// ask for a form based on his name and add an event listener for a submit event
$(sel).submit(function(event) {
// ignore the default behavior
event.preventDefault();
// send as form (application/x-www-form-urlencoded)
$.post("/", $(this).serialize())
.done((data, textStatus, jqXHR) => {
console.log(data);
})
.fail((jqXHR, textStatus, errorThrown) => {
console.error(errorThrown);
});

// send as json (application/json)
let data = {};
$(this).serializeArray().forEach(elem => {
data[elem['name']] = parseInt(elem['value']);
});
$.ajax({
type: "POST",
url: "/",
data: JSON.stringify(data),
contentType: "application/json",
dataType: "json",
success: function(data, textStatus, jqXHR) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error(errorThrown);
}
});
});
});
});

根据使用的传输格式，路由中的数据可以是以不同的方式查询。在传输的情况下"应用程序/x-www-form-urlencoded"或"多部分/form-data"它们位于"request.form"one_answers"application/json"中。他们在里面"request.json".

值的赋值基于各自输入字段的名称。按钮未发送。

出现错误消息是因为您要求在字典中输入值，这是不存在的。当询问get时，由丢失的键抛出的错误被绕过，在这种情况下返回None。

from flask import jsonify 
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':

if request.is_json:
data_type = 'json'
data = request.get_json()
print('json-data:', data)
else:
data_type = 'form'
keys = ('number-1', 'number-2')
data = { k:request.form[k] for k in keys if k in request.form }
print('form-data:', data)

# answer as json
return jsonify(result=data, type=data_type)

return render_template('index.html')