Question Demande de post JavaScript comme un formulaire


J'essaie de diriger un navigateur vers une page différente. Si je voulais une demande GET, je pourrais dire

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

Mais la ressource que j'essaye d'accéder ne répondra pas correctement à moins que j'utilise une demande de POST. Si cela n'a pas été généré dynamiquement, je pourrais utiliser le HTML

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

Ensuite, je voudrais simplement soumettre le formulaire du DOM.

Mais vraiment je voudrais du code JavaScript qui me permet de dire

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

Quelle est la meilleure implémentation cross browser?

modifier 

Je suis désolé, je n'étais pas clair. J'ai besoin d'une solution qui change l'emplacement du navigateur, tout comme la soumission d'un formulaire. Si cela est possible avec XMLHttpRequest, ce n'est pas évident. Et cela ne devrait pas être asynchrone, ni utiliser XML, donc Ajax n'est pas la réponse.


1277
2017-09-25 15:15


origine


Réponses:


function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

Exemple:

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

MODIFIER: Puisque cela a tellement augmenté, je suppose que les gens copieront beaucoup ça. J'ai donc ajouté le hasOwnProperty vérifier pour corriger tout bogue par inadvertance.


1841
2017-09-25 15:28



Ce serait une version de la réponse sélectionnée en utilisant 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();
}

109
2018-04-04 00:21



Une implémentation simple et rapide de la réponse @Aaron:

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

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


62
2017-09-25 15:33



En utilisant le createElement fonction fournie dans cette réponse, ce qui est nécessaire en raison de Le brisement d'IE avec l'attribut name 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);
}

51
2017-09-25 15:29



La réponse de Rakesh Pai est incroyable, mais il y a un problème qui se produit pour moi (en Safari) lorsque j'essaie de poster un formulaire avec un champ appelé submit. Par exemple, post_to_url("http://google.com/",{ submit: "submit" } );. J'ai légèrement modifié la fonction pour contourner cette collision spatiale variable.

    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //Move the submit function to another variable
        //so that it doesn't get overwritten.
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //Call the renamed function.
    }
    post_to_url("http://google.com/", { submit: "submit" } ); //Works!

34
2017-07-15 20:50



Non, vous ne pouvez pas avoir la demande de publication JavaScript comme un formulaire de soumission.

Ce que vous pouvez avoir est un formulaire en HTML, puis soumettez-le avec le JavaScript. (comme expliqué plusieurs fois sur cette page)

Vous pouvez créer le code HTML vous-même, vous n'avez pas besoin de JavaScript pour écrire le code HTML. Ce serait idiot si les gens le suggéraient.

<form id="ninja" action="http://example.com/" method="POST">
  <input id="donaldduck" type="hidden" name="q" value="a">
</form>

Votre fonction ne ferait que configurer le formulaire comme vous le souhaitez.

function postToURL(a,b,c){
   document.getElementById("ninja").action     = a;
   document.getElementById("donaldduck").name  = b;
   document.getElementById("donaldduck").value = c;
   document.getElementById("ninja").submit();
}

Ensuite, utilisez-le comme.

postToURL("http://example.com/","q","a");

Mais je voudrais juste laisser tomber la fonction et juste faire.

   document.getElementById('donaldduck').value = "a";
   document.getElementById("ninja").submit();

Enfin, la décision de style va dans le fichier ccs.

.ninja{ 
  display:none;
}

Personnellement, je pense que les formulaires devraient être adressés par nom, mais ce n'est pas important en ce moment.


27
2017-08-19 01:00



Si tu as Prototype installé, vous pouvez resserrer le code pour générer et soumettre le formulaire caché comme ceci:

 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();

24
2018-01-23 23:53