В запросе Flask / Ajax отсутствуют данные - невозможно его проанализировать

Question

Я пытаюсь получить значение имени формы на сервере flask и добавить его в базу данных. Когда я пытаюсь получить ключи или значения из запроса, но кажется, что ничего не проходит. Пробуя пару разных вещей, я получаю только Response object @ ..., 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);

Answer 2

На самом деле, вышеизложенное вызвало некоторые другие проблемы в будущем. Я хотел бы отметить, что @Vorsprung 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 токенах безопасности, вызывающих некоторые проблемы ... возможно, это является частью этого.).