投稿フォーム上のJQueryを純粋なJavascriptに変換する

Question

私はjavascriptが新しく、機能的なjQueryスクリプトを純粋なJavascriptに変換しようとしています。私は試みたが、失敗した。全体的に私は純粋なjavascript言語で "$ .ajax ..."を "変換する"方法を知らない。誰かが私を助けることができますか？私はこれを試してみました ：

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 { 
     [...] 
     } 
     } 

が助け

新規編集をありがとう...

 $(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/"; 
         } 

        }); 
       } 
      }); 
     }); 

は、私はこれを試してみましたが、それは今のところ正しいかどうかはわかりません私の形で次のよう

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

そして、このブランドの新しいジャバスクリプト：

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

しかし、まだ何の警告ボックスが表示されませんので、JavaScriptコードが機能であるように思われません...

Answer 1

ねえ同じ問題は私のプロジェクトの一つで私が直面されました。以下のコードスニペットは、純粋なjavascriptでajax呼び出しを行うのに役立ちました。これがあなたが探していたものだと願っています。

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

フォームのサブミットのために**更新されたコード**

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

    }); 
})();