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

我试图在flask后端获取表单的名称值，并将其添加到数据库中。 当我尝试从请求中获取密钥或值时，似乎什么都没有发生。尝试了几件不同的事情，我得到了一个

Response对象@…

，一个

b'.

响应，一个没有任何内容的不可变列表。我被难住了

在这方面，我尝试了不少建议。不幸的是，相当多的人似乎正在使用jQuery。其余的似乎没有产生任何实质性的东西，我将破解代码

我的烧瓶代码：

@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);
  });

姓名：
'
var my_form=document.getElementById（“name_form”）；
我的表格附录列表（“提交”，功能（e）{
e、 预防默认值（）；
var request=new XMLHttpRequest（）；
request.open（'POST'，'/addname'，true）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded；charset=UTF-8'）；
//还尝试了request.send（data），其中data是值。
//还尝试了request.send（{'data'：data}），其中data是值。
请求。发送（我的表格）；
});

有人能给我一些关于这方面的建议吗？我对Ajax非常陌生，可以看到它的好处

---

添加了JSFIDLE:

尝试将表单放入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);

---

尝试将表单放入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);

---

事实上，上述情况引发了其他一些问题。我想指出，@vorspring-durch-Technik发布了一个答案，他说发送线路： 应该是

request.send（“name=“+name”）；

我不完全确定为什么这样做有效，但确实有效

关于使用FormData的答案，当我打印request.form时，我得到：

ImmutableMultiDict([('-----------------------------
231208931201322113290\r\nContent-Disposition: 
form-data; name', 
'"name"\r\n\r\nTest\r\n-----------------------------
231208931201322113290--\r\n')])

---

这不想被评估。（更改了数字，以防它们敏感。这与安全令牌有关吗？我看到一些关于jinja csrf令牌和JS安全令牌的帖子，导致了一些问题……可能这就是其中的一部分。）实际上，上面的内容还引发了其他一些问题。我想指出，@vorspring-durch-Technik发布了一个答案，他说发送线路： 应该是

request.send（“name=“+name”）；

我不完全确定为什么这样做有效，但确实有效

关于使用FormData的答案，当我打印request.form时，我得到：

ImmutableMultiDict([('-----------------------------
231208931201322113290\r\nContent-Disposition: 
form-data; name', 
'"name"\r\n\r\nTest\r\n-----------------------------
231208931201322113290--\r\n')])

---

这不想被评估。（更改了数字，以防它们敏感。这与安全令牌有关吗？我看到一些关于jinja csrf令牌和JS安全令牌的帖子，导致了一些问题……可能这就是其中的一部分。）.

你的JS在标记中吗？确实如此。只是将上面代码段中的代码简化为尽可能简单。你的JS在标记中吗？确实如此。只是将上面代码段中的代码简化为尽可能简单。这样就可以打印请求对象。但是，

stage_name=request.form.get（'data'）##或者这个##stage#u name=request.form.get（'new\u stage\u name'）

都返回none

数据

和

new\u stage\u name

都是表单中的输入。请尝试

request.form.get（'name'）

，您可能还需要给您输入一个

name

属性，即

对不起，我的意思是说

request.form.get（'name'））

让我尝试使用name属性。这可能就是问题所在。+1它起作用了。我缺少name属性，然后需要传递一个FormData对象。非常感谢！后续问题：与仅一个变量相比，FormData中是否有大量开销。是否类似于

XHR.send（{'name'：name}）

work？我想我接下来要讨论的是传递变量的其他方式！再次感谢！这样就可以打印请求对象了。但是，

stage\u name=request.form.get（'data'）##或者这个#stage\u name=request.form.get（'new\u stage\u name'））

都返回none

数据

和

新阶段名称

都不是表单中的输入。请尝试

request.form.get（'name'）

，您可能还需要为您输入一个

名称

属性，即

对不起，我的意思是

request.form.get（'name'））

让我尝试使用name属性。这可能就是问题所在。+1它起作用了。我缺少name属性，然后需要传递一个FormData对象。非常感谢！后续问题：与仅一个变量相比，FormData中是否有大量开销。是否类似于

XHR.send（{'name'：name}）

work？我想接下来要讨论的是传递变量的其他方法！再次感谢！