Requête post JavaScript comme une soumission de formulaire

Question

Je cherche à rediriger un navigateur vers une autre page. Si je voulais une requête GET, je pourrais dire

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

Mais la ressource que j'essaie d'accéder ne répondra pas correctement à moins que j'utilise une requête POST. Si cela n'était pas généré dynamiquement, je pourrais utiliser le HTML

Ensuite, je soumettrais simplement le formulaire depuis le DOM.

Mais vraiment, j'aimerais un code JavaScript qui me permet de dire

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

Quelle est la meilleure implémentation cross-browser ?

J'ai besoin d'une solution qui change l'emplacement du navigateur, tout comme soumettre un formulaire. Si c'est possible avec XMLHttpRequest, ce n'est pas évident. Et cela ne doit pas être asynchrone, ni utiliser XML, donc Ajax n'est pas la réponse.

Answer 1

Créer dynamiquement des dans un formulaire et le soumettre

/**
 * envoie une requête à l'URL spécifiée à partir d'un formulaire. Cela changera la localisation de la fenêtre.
 * @param {string} path le chemin pour envoyer la requête post
 * @param {object} params les paramètres à ajouter à l'URL
 * @param {string} [method=post] la méthode à utiliser sur le formulaire
 */

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

  // Le reste de ce code suppose que vous n'utilisez pas de bibliothèque.
  // Il peut être moins verbeux si vous en utilisez une.
  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();
}

Exemple:

post('/contact/', {name: 'Johnny Bravo'});

EDITION: Comme cela a été beaucoup voté, je suppose que les gens vont copier-coller cela beaucoup. J'ai donc ajouté la vérification de hasOwnProperty pour corriger d'éventuels bugs involontaires.

Answer 2

Ce serait une version de la réponse sélectionnée utilisant jQuery.

// Poster vers l'URL fournie avec les paramètres spécifiés.
function post(path, parameters) {
    var form = $('');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // Le formulaire doit faire partie du document pour que nous puissions le soumettre.
    $(document.body).append(form);
    form.submit();
}

Answer 3

Une mise en œuvre simple et rapide de la réponse de @Aaron :

document.body.innerHTML += '';
document.getElementById("dynForm").submit();

Bien sûr, vous devriez plutôt utiliser un framework JavaScript tel que Prototype ou jQuery...

Answer 4

En utilisant la fonction createElement fournie dans cette réponse, qui est nécessaire en raison du problème de l'attribut name d'IE sur les éléments créés normalement avec document.createElement:

function postToURL(url, values) {
    values = values || {};

    var form = createElement("form", {action: url,
                                      method: "POST",
                                      style: "display: none"});
    for (var property in values) {
        if (values.hasOwnProperty(property)) {
            var value = values[property];
            if (value instanceof Array) {
                for (var i = 0, l = value.length; i < l; i++) {
                    form.appendChild(createElement("input", {type: "hidden",
                                                             name: property,
                                                             value: value[i]}));
                }
            }
            else {
                form.appendChild(createElement("input", {type: "hidden",
                                                         name: property,
                                                         value: value}));
            }
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

Answer 5

Si vous avez Prototype installé, vous pouvez resserrer le code pour générer et soumettre le formulaire caché de cette manière:

 var form = new Element('form',
                        {method: 'post', action: 'http://example.com/'});
 form.insert(new Element('input',
                         {name: 'q', value: 'a', type: 'hidden'}));
 $(document.body).insert(form);
 form.submit();