JavaScript post request like a form submit

Question

I'm trying to direct a browser to a different page. If I wanted a GET request, I might say

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

But the resource I'm trying to access won't respond 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 would just submit the form from the DOM.

But really I would like JavaScript code that allows me to say

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

What's the best cross browser implementation?

Edit

I'm sorry I was not clear. I need a solution that changes the location of the browser, just like submitting a form. If this is possible with XMLHttpRequest, it is not obvious. And this should not be asynchronous, nor use XML, so Ajax is not the answer.

Answer 1

Dynamically create <input>s in a form and submit it

/**  * 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 verbose 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: 'Johnny Bravo'}); 

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Answer 2

This would be a version of the selected answer using jQuery.

// Post to the provided URL with the specified parameters. function post(path, parameters) {     var form = $('<form></form>');      form.attr("method", "post");     form.attr("action", path);      $.each(parameters, function(key, value) {         var field = $('<input></input>');          field.attr("type", "hidden");         field.attr("name", key);         field.attr("value", value);          form.append(field);     });      // The form needs to be a part of the document in     // order for us to be able to submit it.     $(document.body).append(form);     form.submit(); }