javascript - Flask/Ajax 请求似乎没有数据 - 无法解析它

Question

我正在尝试获取 flask 后端表单的名称值并将其添加到数据库中。当我尝试从请求中获取键或值时，但似乎什么也没有发生。尝试了一些不同的事情，我得到了一个 Response 对象 @ ...、一个 b'...' 响应、一个没有任何内容的不可变列表。我很困惑。

我在这里尝试了很多关于SO的建议。不幸的是，很多人似乎都在使用 jQuery。其余的似乎没有产生任何我可以破解代码的实质性内容。

我的 flask 代码:

@app.route('/add-name', methods=['POST'])
def add_stage():
    print(request)
    # name = New_Item(name=request.form.get('name'))
    # db.session.add(stage)
    # db.session.commit()
    data = {'response': 'OK'}
    return jsonify(data);

我的JS代码:

<form id="name_form" action="" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name"/>
</form>'


var my_form = document.getElementById("name_form");


my_form.addEventListener("submit", function(e) {
    e.preventDefault();

    var request = new XMLHttpRequest();
    request.open('POST', '/add-name', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    // Also tried request.send(data) where data was the value.
    // Also tried request.send({'data': data } where data was the value.
    request.send(my_form);
  });

有人可以给我一些建议吗？我对 Ajax 还很陌生，并且可以看到它的好处。

添加了 JSfiddle:https://jsfiddle.net/396rpLzm/

Answer 1

尝试将表单放入 FormData 对象中:

var my_form = document.getElementById("name_form");
var XHR = new XMLHttpRequest();
var FD = new FormData(my_form);
XHR.open("POST", '/add-name');
XHR.send(FD);