Отправьте форму, используя чистую Javascript

Question

Здравствуйте, привет javascript newb ie здесь.

Я пытаюсь отправить форму с чистым javascript, но не удается:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("ready");
        var data = JSON.parse(this.response);
        console.log('success');
      } else {
        console.log("not ready yet");
      };
    };
    request.onerror = function() {
      console.log("connection error");
    };
    request.send();
  });

});

Чего мне не хватает?

спасибо!

Answer 1

Вы ничего не отправляете на сервер. Тело запроса должно быть отправлено методом send(). Попробуйте это:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("ready");
        var data = JSON.parse(this.response);
        console.log(data); // returns the dictionnary { selected_elements:[] } 
        console.log('success');
      } else {
        console.log("not ready yet");
      };
    };
    request.onerror = function() {
      console.log("connection error");
    };
    request.send(myform); // Passed the form to be send with request body.
  });

});

Документы Mozilla по методу send().

Answer 2

Использование FormData было ответом. Спасибо, Налин, за то, что поставил меня на правильный путь!

JS:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    var formData = new FormData(myform);
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("ready");
        var data = JSON.parse(this.response);
        console.log(data); // returns the dictionnary { selected_elements:[] } 
        console.log('success');
      } else {
        console.log("not ready yet");
      };
    };
    request.onerror = function() {
      console.log("connection error");
    };
    request.send(formData);
  });

});