Javascript XMLHTTPREQUEST Post sending GET on localhost

Question

I am trying to POST Form data using pure javascript XMLHTTPREQUEST library. My javascript function first gets all the html form data and cleans it as well as check that it is the right format before sticking it in an Object.
Then the normal request library is used to send the JSON.stringify(Object) with the right headers. The problem is I am testing it on my Apache localhost and it does not send the data to the designated php file. It only concatenates the data to my Url header as a GET request.

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

Can someone help to give me a clue why that would happen and how do you test a POST request on a localhost?

Answer 1

@epascarello gave the right diagnoses to solve my question. Therefore I am posting it.
The concatenated data to my URL and constant GET request sent, even though POST was requested, is due to me

not cancelling the form submission.

To cancel form submission depends on how the XmlHttpRequest object is called. In my case I called the function with an onclick event bound to a html <button> .

The button had no type attribute set which meant it defaulted to submit.

I changed the button attribute to type='button' which cancelled the form submission.

My second problem of not executing the php file or completing the request within the set javascript load event function was due to the XmlHttpRequest .send property's second parameter not set as a relative path. My incorrect path therefore showed a

network request

404 Not Found with Request URL:http://localhost/myprojects/pages/localhost/myprojects/pages/app/web_app/getter.php .
By changing my absolute path to a relative path the POST request was completed.