Konvertieren von JQuery in reines Javascript beim Senden von Formular

Question

Ich bin neu bei Javascript und ich versuche, eine funktionale jQuery-Skript in reines Javascript zu konvertieren. Ich habe es versucht, aber ich habe versagt. Insgesamt weiß ich nicht, wie man $ .ajax ... in reiner Javascript-Sprache "umwandelt". Kann mir jemand helfen ?

 $(document).ready(function() { 

      $('form').on('submit', function(e) { 
       e.preventDefault(); 

       var $this = $(this); 

       var login = $('login').val(); 
       var nom = $('nom').val(); 

       if(login === '' || nom === '') { 
        alert('Fill the form correctly'); 
       } else { 

        $.ajax({ 
         url: $this.attr('action'), // call webservice 
         type: $this.attr('method'), // method="POST" in the form 
         data: $this.serialize(), 
         success: function(html) { 
          alert('User added : success');/
          window.location.href = "http://localhost:8080/games_v3/"; 
         } 

        }); 
       } 
      }); 
     }); 

Ich versuchte dies aber ich weiß nicht, ob es richtig, so weit ist ...

var event = document.querySelector("#button").addEventListener("click", waitfunction()); 

    function waitfunction(){ 
     event.preventDefault(); 
     form = document.getElementById(this); 

     var login = document.getElementById("login"); 
     var nom = document.getElmentById("nom"); 

     if(login === '' || nom === '') { 
      alert('Fill the form correctly'); 
     } else { 
     [...] 
     } 
     } 

Sie für die Hilfe danken

New Edit: ich dies mit der bewährten folgende in meiner Form:

 <form onsubmit="return ready(fn);" [...] 

Und das brandneue javascript:

 function ready(fn) { 
     if (document.readyState != 'loading'){ 
     fn(); 
     } else { 
     document.addEventListener('DOMContentLoaded', fn); 
     } 
    } 

    function fn(){ 
     var form = document.getElementById("form"); 
     form.addEventListener('submit', fn2(e)); 
    } 

    function fn2(e){ 
     e.preventDefault(); 
     var login = document.getElementById("login").value; 
     var nom = document.getElementById("nom").value; 
     if(login === '' || nom === '') { 
      alert('Les champs doivent êtres remplis'); 
     } else { 
      var form = document.querySelector('form'); 
      var data = new FormData(form); 
      var request = new XMLHttpRequest(); 
      request.open('POST', './jeux/webservicesutilisateur/post', true); 
      request.setRequestHeader('Content-Type', 'application/x-www-form-         urlencoded; charset=UTF-8'); 
      request.send(data); 
      request.onload = function(html) { 
       if (request.status >= 200 && request.status < 400) { 
        alert('Utilisateur ajouté avec succès'); // J'affiche cette réponse 
        window.location.href = "http://localhost:8080/games_v3/"; 
        var resp = request.responseText; 
     } 
      request.send(); 
     } 
    } 
    } 

aber noch keine Warnmeldung angezeigt wird, so ist die Javascript-Code nicht funktionsfähig zu sein muss scheint ...

Answer 1

Hey das gleiche Problem wurde von mir in einem meiner Projekte konfrontiert. Das folgende Code-Snippet half dabei, in reinem Javascript Ajax aufzurufen. Hoffe, das ist, was Sie gesucht haben.

/** 
* 
* @param url 
* @param method 
* @param data 
* @param callback (Callback function to handle response state) 
* @returns {boolean} 
*/ 
function makeAjaxRequest(url, method, data, callback) { 
    var httpRequest; 
    if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
     httpRequest = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { // IE 
     try { 
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) { 
      try { 
       httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e) { 
      } 
     } 
    } 

    if (!httpRequest) { 
     console.log('Giving up :(Cannot create an XMLHTTP instance'); 
     return false; 
    } 
    httpRequest.onreadystatechange = (function() { 
     return callback(httpRequest); 
    }); 
    if (method && method.toUpperCase() == 'POST') { 
     httpRequest.open(method, url, true); 
     httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     httpRequest.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
     httpRequest.send(data); 
    } else { 
     httpRequest.open(method, url); 
     httpRequest.send(); 
    } 
} 

** AKTUALISIERT CODE FÜR FORM SUBMISSION **

function callbackHandler(httpRequest) { 
    // response has been received so handle it now 
    if (httpRequest.readyState === 4) { 
     //In case status is 200 is what you are looking for implementation 
     // of this will change accordingly 
     if (httpRequest.status >= 200 && httpRequest.status < 400) { 
      alert("Posted form successfully"); 
      var resp = httpRequest.responseText; 
      console.log(httpRequest.responseText); 
     } 
    } 
} 


(function(){ 
    document.addEventListener('DOMContentLoaded',function(){ 
     var form = document.querySelector('form'); 
     form.addEventListener('submit',function(e){ 
      e.preventDefault(); 
      var login = document.getElementById("login").value; 
      var nom = document.getElementById("nom").value; 
      if(login==='' || nom === '') { 
       alert('Les champs doivent êtres remplis'); 
      } else { 
       var form = document.querySelector('form'); 
       var data = new FormData(form); 
       var action = form.getAttribute("action"); 
       var method = form.getAttribute("method"); 
       makeAjaxRequest(action,method,data,handler); 
      } 
     }); 

    }); 
})();