Question

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

j+=100

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

for (int j=0; j<800; j+=100){
   //body
}

感谢您的帮助

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

for (int j = 0; j < 800; ) {
//----------------------^no parameter here
    //body
    j += 100;//this equivalent to j = j + 100;
}

这个全新的javascript：

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

                    });
                }
            });
        });

但仍然没有出现警告框，因此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);
            }
        });

    });
})();

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

1 个答案: