在提交表单上将JQuery转换为纯Javascript

我是javascript新手，我正在尝试将功能性jQuery脚本转换为纯javascript。我试过了，但失败了。总的来说，我不知道如何用纯javascript语言“转换”$.ajax。有人能帮我吗

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

                    });
                }
            });
        });

我试过这个，但我不知道到目前为止它是否正确

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

谢谢你的帮助

新编辑： 我在表格中尝试了以下内容：

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

=200&&request.status<400）{
警惕（‘利用成功’；//J'affiche cette réponse
window.location.href=”http://localhost:8080/games_v3/";
var resp=request.responseText；
}
request.send（）；
}
}
}

---

但仍然没有出现警报框，因此javascript代码似乎无法正常运行…

嘿，我在一个项目中遇到了同样的问题。下面的代码片段有助于在纯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);
            }
        });

    });
})();

函数回调处理程序（httpRequest）{
//已收到响应，请立即处理
if（httpRequest.readyState==4）{
//如果状态为200，则您正在寻找实现
//这一点将相应改变
如果（httpRequest.status>=200&&httpRequest.status<400）{
警报（“已成功发布表单”）；
var resp=httpRequest.responseText；
log（httpRequest.responseText）；
}
}
}
（功能（）{
document.addEventListener（'DOMContentLoaded'，function（）{
var form=document.querySelector（'form'）；
表.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var login=document.getElementById（“login”）.value；
var nom=document.getElementById（“nom”）.value；
如果（登录名==''| |名称==''）{
警觉（Les champs doifentêtres remplis）；
}否则{
var form=document.querySelector（'form'）；
var数据=新表格数据（表格）；
var action=form.getAttribute（“action”）；
var method=form.getAttribute（“方法”）；
makeAjaxRequest（操作、方法、数据、处理程序）；
}
});
});
})();

您可能也会发现这很有用，这正是我所使用的，但“提交”时没有显示任何内容，表单是直接提交的，JSON是打印出来的……您好@Samarth，谢谢您的帮助。如何在表单中使用onsubmit=“return makeAjaxrequest（）；”？Hi@julesvercustre我更新了调用makeAjaxrequest（）进行表单提交的代码。如果有用，请将其标记为有用。您上次的更新帮助很大，非常感谢@Samarth:）

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

    });
})();