Formular per Ajax versenden

[heinetz]

Hallo Forum,

ich habe in der Vergangenheit immer mal wieder Formulare per Ajax versendet, die Response ausgewertet und per JS darauf reagiert ... aber mein Development-Stack war ein LAMP-System und ich habe dazu jQuery und u.U. jQ-Plugins verwendet. Nun heisst meine Entwicklungsumgebung NODE.js und ich will kein jQuery verwenden, sondern ES6 und u.U. NODE-Module. Ich fühle mich in der Umgebung noch nicht wirklich sicher und bin bis hierher gekommen:

import BaseModule from '../../../../javascripts/helpers/baseModule';

export default class Commentsform extends BaseModule {
  constructor(element) {
    super(element, element.getAttribute('data-js-module'));

    this.getElements([
      { id: 'messageSubmit', selector: 'messageSubmit' }
    ]);

    this.bindEvents();
  }

  bindEvents() {
    this.elements.messageSubmit.addEventListener('click', this.submitForm.bind(this));
  }

  submitForm(event) {
    console.log('submitForm()');
    event.preventDefault();
    const request = url => {
      const ajax = new XMLHttpRequest();
      ajax.open('GET', url, true);
      ajax.send();
      ajax.onload = () => {
        console.log(ajax);
      };
    };
    request('/html/index.html');
  }
}

Was damit funktioniert:

Der Click auf den Submit-Button löst einen Ajax-Request aus und das Ajax-Object wird in der Console ausgegeben. Darin enthalten die Response …

Was fehlt:

• Ich möchte das Formular per POST versenden.
• Ich erwarte JSON als Antwort vom Server.
• Das Formular wird zur Zeit mit der HTML5-Funktionalität des Browsers (required-Attribut etc.) validiert. Sobald ich das Verhalten des buttons per preventDefault abschalte, funktioniert die Validierung nicht. Lässt sich das vernünftig lösen?

Grundsätzlich...

... stelle ich mir die Frage, ob ich auf dem richtigen Weg bin. Sicher lässt sich das komplett "zu Fuss" machen. Z.B. werde ich das Formular ja serialisieren müssen.

Kann mir jemand dabei helfen, das sinnvoll zu Ende zu entwickeln?

danke und

gruss, heinetz