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

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

• javascript
• html
• ajax
• forms

• What is the question? – trenthaynes Commented Mar 10, 2016 at 16:40
• 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. Commented Mar 11, 2016 at 15:04
• GET != POST. They are pletely 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 Commented Mar 11, 2016 at 17:15
• So append the params to the URL when it is a GET – epascarello Commented Mar 11, 2016 at 18:09
• @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. Commented Mar 11, 2016 at 18:25

3 Answers 3

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>

Are you sure the problem is not the PHP script? I see no reference that https://developer.mozilla/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.

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.', { 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.