如何使用ajax将异步值从html传递到flask？

Question

我正在尝试使用 ajax 将两个异步值从 html 传递到烧瓶。我创建了一个带有两个按钮和两个输入的简单 html。我想通过单独的按钮单击来传递每个变量。 我收到以下消息：error message

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 中的部分 od 代码：

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” 或“多部分/表单数据”。对于 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”或“multipart/form-data” 它们在“request.form”中，在“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')