Javascript XMLHTTPREQUEST Post 在本地主机上发送 GET答案

【问题标题】：Javascript XMLHTTPREQUEST Post sending GET on localhostJavascript XMLHTTPREQUEST Post 在本地主机上发送 GET
【发布时间】：2020-09-17 10:42:41
【问题描述】：

我正在尝试使用纯 javascript XMLHTTPREQUEST 库发布表单数据。我的 javascript 函数首先获取所有 html 表单数据并对其进行清理，并在将其粘贴到 Object 之前检查其格式是否正确。
然后使用普通请求库发送带有正确标头的JSON.stringify(Object)。问题是我在我的 Apache localhost 上对其进行测试，它没有将数据发送到指定的 php 文件。它仅将数据作为 GET 请求连接到我的 Url 标头。

        let reqObj = new XMLHttpRequest();
        var elem = document.getElementById(msgContan);
        //add event listener for request
        reqObj.addEventListener("progress", function(eve) {
            if (eve.lengthComputable) {
                //show progress on download using view
                jsView.elementShowMover(elem, strPos,endPos,moveMs);
                document.getElementById(msgElemnt).innerText = Math.round(eve.loaded/eve.total * 100) + "% Complete";
            }
        });
        reqObj.addEventListener("load", function(eve) {
            if (reqObj.status >= 200 && reqObj.status < 300) {
                //elem.style.display = "none";
                console.log('Completed');
            }
        });
        reqObj.addEventListener("error", function(eve) {
            document.getElementById(msgElemnt).innerText = "Failed to post data.";
        });
        reqObj.addEventListener("abort", function(eve) {
            document.getElementById(msgElemnt).innerText = "Data post was cancelled.";
        });
        //set timeout @ 30 seconds
        reqObj.timeout = 30000;
        //open network request
        reqObj.open('POST', 'localhost/myprojects/pages/app/web_app/getter.php');
        //set http-headers
        reqObj.setRequestHeader('Content-Type', 'application/json');
        //send the request
        reqObj.send(JSON.stringify(answ.jObj));

有人可以帮我解释一下为什么会发生这种情况以及如何在 localhost 上测试 POST 请求吗？

【问题讨论】：

听起来你并没有取消表单提交
@epascarello 谢谢。如何取消表单提交？
你怎么称呼这段代码？
我相信我解决了。你哪里对！我使用绑定到 html <button> 的 onclick 事件调用该函数。该按钮没有设置type 属性，这意味着它默认为submit。我将按钮属性更改为type='button'，并且第一次将progress 事件函数触发为100%。 load 事件没有触发，我的 php 文件也没有触发。但是您的诊断已导致治愈，并且已发送 POST 请求。我只需要弄清楚为什么load 事件没有触发并且php 文件没有执行。非常感谢。你知道这个请求为什么会这样吗？
查看网络请求，看看它显示了什么

标签： javascript php post xmlhttprequest localhost

【解决方案1】：

@epascarello 给出了正确的诊断来解决我的问题。因此，我将其发布。
即使请求了POST，连接到我的 URL 和不断发送的 GET 请求的数据也是由于我造成的

不取消表单提交。

取消表单提交取决于如何调用 XmlHttpRequest 对象。在我的例子中，我使用绑定到 html <button> 的 onclick 事件调用了该函数。

该按钮没有设置类型属性，这意味着它默认提交。

我将按钮属性更改为type='button'，取消了表单提交。

我没有执行 php 文件或在 set javascript load 事件函数中完成请求的第二个问题是由于 XmlHttpRequest .send 属性的第二个参数未设置为相对路径。因此，我的错误路径显示了一个

网络请求

404 Not Found 和 Request URL:http://localhost/myprojects/pages/localhost/myprojects/pages/app/web_app/getter.php。
通过将我的绝对路径更改为相对路径，POST 请求已完成。

【讨论】：