JavaScript post request like a form submit

Question

I am trying to direct my browser to a different page. If I wanted a GET request, I want to say:

document.location.href = 'http://example.com/q=a';

But the resource I am trying to access is not responding properly unless I use a POST request. If this were not dynamically generated, I might use the HTML

<form action="http://example.com/" method="POST">

  <input type="hidden" name="q" value="a">

</form>

Then I will just submit the form from the DOM.

But what I like JavaScript code to allow me to say:

post_to_url('http://example.com/', {'q':'a'});

What is the best cross-browser implementation?

Answer 1

You can dynamically create input tags in a form and submit the form like this:

/**

 * sends a request to the specified URL from a form. this will change the window location.

 * @param {string} path the path to send the post request to

 * @param {object} params the parameters to add to the URL

 * @param {string} [method=post] the method to use on the form

 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.

  // It can be made less wordy if you use one.

  const form = document.createElement('form');

  form.method = method;

  form.action = path;

  for (const key in params) {

    if (params.hasOwnProperty(key)) {

      const hiddenField = document.createElement('input');

      hiddenField.type = 'hidden';

      hiddenField.name = key;

      hiddenField.value = params[key];

      form.appendChild(hiddenField);

    }

  }

  document.body.appendChild(form);

  form.submit();

}

Example:

post('/contact/', {name: 'Dale Steyn'});

Want to learn Java? Check out the Java certification from Intellipaat.