How to pass FormData over XMLHttpRequest using GET method

Question

When Method of the senderform is POST, everything works fine. However, as soon as I change the method to GET, I don't receive anything on the server.

function ajaxSubmit(destinationElement, senderform) {

    var xmlreq = new XMLHttpRequest();
    var params = new FormData(senderform);
    xmlreq.open(senderform.method, senderform.action, true);

    if (/\/content\.php$/.test(senderform.action))
        xmlreq.onreadystatechange = receiveTable;
    else xmlreq.onreadystatechange = receiveText;

    xmlreq.send(params);
}

I know that I could manually append key-value pairs at the end of Action address, but the problem is that I don't know which form is going to be passed with what fields.

I would prefer native javaScript if possible.

How can I send a GET request using XMLHttpRequest with key-value pairs from senderform which points to form Element (the same way as it already works for POST requests)?

How to send GET request using XMLHttpRequest with key-value pairs from `senderform` which points to form Element (the same way as it already works for POST requests)? — Jakub M., Mar 11 '16 at 15:04
GET != POST. They are completely different mechanisms. You cannot use GET the same way you use POST. To use GET in place of POST, you will need to parse the form, gather the name:value pairs, add them to the query string - just like the link you provided. — trenthaynes, Mar 11 '16 at 17:15
@whipdancer, I know they are different, I was interested in some automatic way of appending key-value pairs at the end of address. But probably there isn't, so I will try to write the script for that, I just didn't want to code something that already may have been existing. — Jakub M., Mar 11 '16 at 18:25

Jakub M. · Answer 1 · 2022-07-21T17:56:08.377

First parameter is a reference to submit button, or form element itself. Second is callback function for XMLHttpRequest.

var ajaxSubmit = function(sender, callback) {
    var xmlreq = new XMLHttpRequest(), params;
    // look around for the sender form and key-value params
    if (sender.form !== undefined)
    {
        params = new FormData(sender.form);
        params.append(sender.name, sender.value);
        sender = sender.form;
    }
    else params = new FormData(sender);
    var actAddress = sender.action;

    // append the params to the address in action attribute
    if (sender.method == 'get')
    {
        var firstRun = true;
        for (var key of params.keys())
        {
            if (firstRun)
            {
                actAddress += '?';
                firstRun = false;
            }
            else actAddress += '&';
            actAddress += key + "=" + params.get(key);
        }
    }
    
    xmlreq.open(sender.method, actAddress, true);
    xmlreq.onreadystatechange = callback;
    if (sender.method == 'get')
        xmlreq.send();
    else xmlreq.send(params);
}

Therefore you can use it as

<form onsubmit="ajaxSubmit(this,callbackFx)" >
<!-- or -->
    <input onclick="ajaxSubmit(this,callbackFx)" type="submit" name="" value=""/>
</form>

score 1 · Answer 2 · answered Mar 11 '16 at 18:07

1

Are you sure the problem is not the PHP script? I see no reference that https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#send() with FormData needs POST to work, but if the PHP script takes the info from $POST or something (My PHP is rusty), the behavior would be different.

answered Mar 11 '16 at 18:07

Siderite Zackwehdex

6,293
3
30
46

1

I suggest you look in the browser debug mode, at the Network tab, see what is actually transmitted – Siderite Zackwehdex Mar 11 '16 at 18:09

score 1 · Answer 3 · edited Oct 07 '21 at 12:12

Since you can't create a useable body in a GET request (see below), then the other option is to use params in the url.

function buildGetUrlParams(baseUrl, paramsObj) {
  var builtUrl = baseUrl + "?";
  Object.keys(paramsObj).forEach(function(key) {
    builtUrl += key + "=" + paramsObj[key] + "&";
  });
  return builtUrl.substr(0, builtUrl.length - 1);
}

document.getElementById('finalUrl').innerText = buildGetUrlParams('http://test.url.com', { name:'James', occupation:'web design' });

<div id="finalUrl"></div>

An HTTP GET request can contain a body, but there is no semantic meaning to that body. Which means, in simple terms, that a server doesn't have any reason to, nor have any knowledge of how, to process the body of a GET request. If it's possible to write a server that could do this, it would be bad practice as per the HTTP/1.1 specs:

if the request method does not include defined semantics for an entity-body, then the message-body SHOULD be ignored when handling the request.

And that's basically why it's not working. If you want to send any sort of data that the server is able to respond to, then you'll need to use a different HTTP method.

This answer also explains this issue.

Thanks for answer, it greatly explained why my solution didn't work. However it didn't adjust for the form referenced. I have posted an answer with solution I have came to. — Jakub M., Mar 14 '16 at 15:03

How to pass FormData over XMLHttpRequest using GET method

3 Answers3