Demande de publication JavaScript comme un formulaire soumis


1531

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

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

Mais la ressource à laquelle j'essaie d'accéder ne répondra pas correctement à moins que j'utilise une demande POST. Si ce n'était pas 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 je voudrais vraiment du code JavaScript qui me permette de dire

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

Quelle est la meilleure implémentation multi-navigateurs?

Éditer

Je suis désolé de ne pas avoir été clair. J'ai besoin d'une solution qui modifie l'emplacement du navigateur, tout comme pour soumettre un formulaire. Si cela 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.


1
Comme mentionné dans un autre thread, il existe un plugin jquery ".redirect" qui fonctionne avec la méthode POST ou GET. Il crée un formulaire avec des entrées cachées et le soumet pour vous. Ex: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean

Réponses:


2145

Créez dynamiquement des <input>s dans un formulaire et soumettez-le

/**
 * 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 paramiters 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();
}

Exemple:

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

EDIT : Étant donné que cela a été tellement voté, je suppose que les gens vont beaucoup copier-coller. J'ai donc ajouté la hasOwnPropertyvérification pour corriger tout bogue par inadvertance.


10
Qu'en est-il des tableaux dans les paramètres de données? Jquery post () interprète par exemple: "data: {array: [1, 2, 3]}" as? Array = 1 & array = 2 & array = 3. Ce code donne un autre résultat.
Scit

18
Avertissement: malgré les nombreux votes positifs, cette solution est limitée et ne gère pas les tableaux ou les objets imbriqués à l'intérieur d'un formulaire. Sinon, c'est une excellente réponse.
emragins

3
incroyable, ce n'est pas pris en charge nativement par html ni javascript pas jquery .. vous devez coder cela.
eugene

14
@mricci Le but de cet extrait est de rediriger le navigateur vers une nouvelle URL spécifiée par l'action; si vous restez sur la même page, vous pouvez simplement utiliser AJAX traditionnel pour publier vos données. Étant donné que le navigateur doit naviguer vers une nouvelle page, le contenu du DOM de la page actuelle n'a pas d'importance
Ken Bellows

6
Les utilisateurs de Python, Django et probablement Flask verront cette erreur: "Interdit (403). La vérification CSRF a échoué. Demande abandonnée.", Si vous créez un formulaire à partir de zéro. Dans ce cas, vous devez transmettre le jeton csrf de cette façon: post ('/ contact /', {nom: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Davidson Lima

129

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

2
Corrigé: maintenant ajouté à document.body
Ryan Delucchi

7
Légèrement modifié cela pour prendre en charge les tableaux et les objets gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО

3
Si la valeur contient un caractère xml dangeours, cela ne fonctionnera pas dans ASP.NET encodeUriComponent (value) est requis. Ensuite, UrlDecode est également requis côté serveur.
Stefan Steiger

Si vos besoins sont simples, cette fonction n'est pas nécessaire. Ce one-liner est suffisant:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
rinogo

71

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 ...


6
Existe-t-il un moyen de le faire sans qu'une page Web ne soit chargée dans la fenêtre / l'onglet actuel du navigateur?
pbreitenbach

54

Utiliser la createElementfonction fournie dans cette réponse , qui est nécessaire en raison de la rupture d' Internet Explorer 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);
}

6
Devez-vous retirer l'enfant après la soumission? La page ne disparaît-elle pas de toute façon?
Nils

2
Il est inutile de supprimer l'enfant après la soumission, sauf si une session est utilisée et que ces données sont enregistrées.
Miloš

6
@CantucciHQ La page pourrait tout aussi bien rester inchangée même si la cible du formulaire n'est pas définie. Il n'y a par exemple pas 204 de contenu .
Eugene Ryabtsev

38

La réponse de Rakesh Pai est incroyable, mais il y a un problème qui se produit pour moi (dans 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 corrigé légèrement la fonction pour contourner cette collision à espace 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!

7
2018 et toujours pas une meilleure réponse?
iiirxs

30

Non. Vous ne pouvez pas avoir la demande de publication JavaScript comme un formulaire soumis.

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

Vous pouvez créer le HTML vous-même, vous n'avez pas besoin de JavaScript pour écrire le 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 configurerait simplement 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 simplement laisser de côté la fonction et le 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 doivent être adressés par leur nom, mais ce n'est pas important pour le moment.


26

Si vous avez installé Prototype , 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();

25

c'est la réponse de rakesh, mais avec le support des tableaux (ce qui est assez courant dans les formulaires):

Javascript simple:

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

    var addField = function( key, value ){
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", value );

        form.appendChild(hiddenField);
    }; 

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            if( params[key] instanceof Array ){
                for(var i = 0; i < params[key].length; i++){
                    addField( key, params[key][i] )
                }
            }
            else{
                addField( key, params[key] ); 
            }
        }
    }

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

oh, et voici la version jquery: (code légèrement différent, mais se résume à la même chose)

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

    var form = $(document.createElement( "form" ))
        .attr( {"method": method, "action": path} );

    $.each( params, function(key,value){
        $.each( value instanceof Array? value : [value], function(i,val){
            $(document.createElement("input"))
                .attr({ "type": "hidden", "name": key, "value": val })
                .appendTo( form );
        }); 
    } ); 

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

3
ps j'aime maintenant utiliser cette fonction mais au lieu de soumettre le formulaire à la fin, je le renvoie simplement à l'appelant. de cette façon, je peux facilement définir des attributs supplémentaires ou faire d'autres choses avec si nécessaire.
kritzikratzi

3
Génial! très utile. Un petit changement pour les personnes qui s'appuient sur PHP côté serveur de ce formulaire, j'ai changé addField (clé, paramètres [clé] [i]) en addField (clé + '[]', paramètres [clé] [i]). Cela rend $ _POST [clé] disponible sous forme de tableau.
Thava

2
@Thava, vous pouvez également définir name = "bla []" dans votre champ de saisie. de toute façon, il y a des langages autres que php qui ne supportent pas la syntaxe [] donc je laisse cela inchangé.
kritzikratzi

17

Une solution consiste à générer le formulaire et à le soumettre. Une mise en œuvre est

function post_to_url(url, params) {
    var form = document.createElement('form');
    form.action = url;
    form.method = 'POST';

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = i;
            input.value = params[i];
            form.appendChild(input);
        }
    }

    form.submit();
}

Je peux donc implémenter un bookmarklet de raccourcissement d'URL avec un simple

javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});

16

Eh bien, j'aurais aimé avoir lu tous les autres messages afin de ne pas perdre de temps à créer cela à partir de la réponse de Rakesh Pai. Voici une solution récursive qui fonctionne avec des tableaux et des objets. Aucune dépendance à jQuery.

Ajout d'un segment pour gérer les cas où le formulaire entier doit être soumis comme un tableau. (c.-à-d. où il n'y a pas d'objet wrapper autour d'une liste d'éléments)

/**
 * Posts javascript data to a url using form.submit().  
 * Note: Handles json and arrays.
 * @param {string} path - url where the data should be sent.
 * @param {string} data - data as javascript object (JSON).
 * @param {object} options -- optional attributes
 *  { 
 *    {string} method: get/post/put/etc,
 *    {string} arrayName: name to post arraylike data.  Only necessary when root data object is an array.
 *  }
 * @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
 */
function postToUrl(path, data, options) {
    if (options === undefined) {
        options = {};
    }

    var method = options.method || "post"; // Set method to post by default if not specified.

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    function constructElements(item, parentString) {
        for (var key in item) {
            if (item.hasOwnProperty(key) && item[key] != null) {
                if (Object.prototype.toString.call(item[key]) === '[object Array]') {
                    for (var i = 0; i < item[key].length; i++) {
                        constructElements(item[key][i], parentString + key + "[" + i + "].");
                    }
                } else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
                    constructElements(item[key], parentString + key + ".");
                } else {
                    var hiddenField = document.createElement("input");
                    hiddenField.setAttribute("type", "hidden");
                    hiddenField.setAttribute("name", parentString + key);
                    hiddenField.setAttribute("value", item[key]);
                    form.appendChild(hiddenField);
                }
            }
        }
    }

    //if the parent 'data' object is an array we need to treat it a little differently
    if (Object.prototype.toString.call(data) === '[object Array]') {
        if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
        //loop through each array item at the parent level
        for (var i = 0; i < data.length; i++) {
            constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
        }
    } else {
        //otherwise treat it normally
        constructElements(data, "");
    }

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

1
Cela ne semble pas non plus encoder correctement les objets imbriqués.
mpen

1
@mpen avez-vous un violon?
emragins

1
Non désolé. C'était assez facile de m'écrire; ne vaut pas le temps de déboguer.
mpen

12

Trois options ici.

  1. Réponse JavaScript standard: utilisez un framework! La plupart des frameworks Ajax vous auront résumé un moyen facile de faire un POST XMLHTTPRequest .

  2. Faites vous-même la demande XMLHTTPRequest, en passant post dans la méthode open au lieu de get. (Plus d'informations dans Utilisation de la méthode POST dans XMLHTTPRequest (Ajax) .)

  3. Via JavaScript, créez dynamiquement un formulaire, ajoutez une action, ajoutez vos entrées et soumettez-le.


5
XMLHTTPRequest ne met pas à jour la fenêtre. Essayez-vous de dire que je devrais terminer avec l'AJAX avec un document.write (http.responseText)?
Joseph Holsten le

11
Pourquoi devrait-on ajouter 30k + à son projet s'il fait autre chose avec le framework?
Dementic

12

Je descendrais la route Ajax comme d'autres l'ont suggéré avec quelque chose comme:

var xmlHttpReq = false;

var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
    self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}

self.xmlHttpReq.open("POST", "YourPageHere.asp", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length);



self.xmlHttpReq.send("?YourQueryString=Value");

1
Uncaught ReferenceError: QueryString n'est pas défini.
Chase Roberts

11

La manière la plus simple consiste à utiliser Ajax Post Request:

$.ajax({
    type: "POST",
    url: 'http://www.myrestserver.com/api',
    data: data,
    success: success,
    dataType: dataType
    });

où:

  • les données sont un objet
  • dataType est les données attendues par le serveur (xml, json, script, text, html)
  • url est l'adresse de votre serveur RESt ou de toute fonction côté serveur qui accepte le HTTP-POST.

Ensuite, dans le gestionnaire de réussite, redirigez le navigateur avec quelque chose comme window.location.


5
Vous n'avez pas mentionné que l'approche que vous proposez est basée sur la bibliothèque JavaScript jQuery .
DavidRR

8
vous avez également manqué le point de la question - il veut «diriger un navigateur vers une autre page», pas faire une demande ajax.
Black

Vous pouvez attendre la réponse, puis document.location = {url}; Le seul endroit où je peux imaginer que cela ne fonctionnerait pas est si vous redirigez vers un téléchargement de fichier.
Epirocks

11

Voici comment je l'ai écrit en utilisant jQuery. Testé dans Firefox et Internet Explorer.

function postToUrl(url, params, newWindow) {
    var form = $('<form>');
    form.attr('action', url);
    form.attr('method', 'POST');
    if(newWindow){ form.attr('target', '_blank'); 
  }

  var addParam = function(paramName, paramValue) {
      var input = $('<input type="hidden">');
      input.attr({ 'id':     paramName,
                 'name':   paramName,
                 'value':  paramValue });
      form.append(input);
    };

    // Params is an Array.
    if(params instanceof Array){
        for(var i=0; i<params.length; i++) {
            addParam(i, params[i]);
        }
    }

    // Params is an Associative array or Object.
    if(params instanceof Object) {
        for(var key in params){
            addParam(key, params[key]);
        }
    }

    // Submit the form, then remove it from the page
    form.appendTo(document.body);
    form.submit();
    form.remove();
}

1
A travaillé pour moi. Merci. (Testé dans Chrome)
dannie.f

2
Je pense que le problème ici pourrait être que le formulaire est supprimé avant le retour de la soumission. J'ai entendu dire que dans certains navigateurs, si vous déplacez ou supprimez le formulaire avant la fin de la soumission, les gestionnaires ne se déclenchent pas. Au lieu de cela, supprimez le formulaire du document dans le gestionnaire.
Jeff DQ

Fonctionne comme un charme. Testé sur Firefox + Chrome + IE11 - Merci beaucoup pour cela!
Deunz

6

Le prototype bibliothèque de comprend un objet Hashtable, avec une méthode ".toQueryString ()", qui vous permet de transformer facilement un objet / une structure JavaScript en une chaîne de style chaîne de requête. Étant donné que la publication requiert que le «corps» de la demande soit une chaîne au format chaîne de requête, cela permet à votre demande Ajax de fonctionner correctement en tant que publication. Voici un exemple d'utilisation de Prototype:

$req = new Ajax.Request("http://foo.com/bar.php",{
    method: 'post',
    parameters: $H({
        name: 'Diodeus',
        question: 'JavaScript posts a request like a form request',
        ...
    }).toQueryString();
};

1
Cette solution est l'une des rares à ne pas remplacer le document actuellement affiché par le retour de la réponse du serveur.
dothebart

4

Cela fonctionne parfaitement dans mon cas:

document.getElementById("form1").submit();

Vous pouvez l'utiliser en fonction comme:

function formSubmit() {
     document.getElementById("frmUserList").submit();
} 

En utilisant cela, vous pouvez publier toutes les valeurs des entrées.


3

Encore une autre solution récursive , car certaines semblent cassées (je ne les ai pas toutes testées). Celui-ci dépend de lodash 3.x et ES6 (jQuery non requis):

function createHiddenInput(name, value) {
    let input = document.createElement('input');
    input.setAttribute('type','hidden');
    input.setAttribute('name',name);
    input.setAttribute('value',value);
    return input;
}

function appendInput(form, name, value) {
    if(_.isArray(value)) {
        _.each(value, (v,i) => {
            appendInput(form, `${name}[${i}]`, v);
        });
    } else if(_.isObject(value)) {
        _.forOwn(value, (v,p) => {
            appendInput(form, `${name}[${p}]`, v);
        });
    } else {
        form.appendChild(createHiddenInput(name, value));
    }
}

function postToUrl(url, data) {
    let form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', url);

    _.forOwn(data, (value, name) => {
        appendInput(form, name, value);
    });

    form.submit();
}

3

Ma solution va encoder des objets profondément imbriqués, contrairement à la solution actuellement acceptée par @RakeshPai.

Il utilise la bibliothèque npm 'qs' et sa fonction stringify pour convertir les objets imbriqués en paramètres.

Ce code fonctionne bien avec un backend Rails, bien que vous devriez pouvoir le modifier pour qu'il fonctionne avec le backend dont vous avez besoin en modifiant les options passées à stringify. Rails nécessite que arrayFormat soit défini sur "brackets".

import qs from "qs"

function normalPost(url, params) {
  var form = document.createElement("form");
  form.setAttribute("method", "POST");
  form.setAttribute("action", url);

  const keyValues = qs
    .stringify(params, { arrayFormat: "brackets", encode: false })
    .split("&")
    .map(field => field.split("="));

  keyValues.forEach(field => {
    var key = field[0];
    var value = field[1];
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", key);
    hiddenField.setAttribute("value", value);
    form.appendChild(hiddenField);
  });
  document.body.appendChild(form);
  form.submit();
}

Exemple:

normalPost("/people/new", {
      people: [
        {
          name: "Chris",
          address: "My address",
          dogs: ["Jordan", "Elephant Man", "Chicken Face"],
          information: { age: 10, height: "3 meters" }
        },
        {
          name: "Andrew",
          address: "Underworld",
          dogs: ["Doug", "Elf", "Orange"]
        },
        {
          name: "Julian",
          address: "In a hole",
          dogs: ["Please", "Help"]
        }
      ]
    });

Produit ces paramètres Rails:

{"authenticity_token"=>"...",
 "people"=>
  [{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}},
   {"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]},
   {"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}

2

FormObject est une option. Mais FormObject n'est pas pris en charge par la plupart des navigateurs actuellement.


1

C'est comme l'option 2 d'Alan (ci-dessus). Comment instancier le httpobj est laissé comme exercice.

httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);

1

Ceci est basé sur le code de beauSD utilisant jQuery. Il est amélioré afin qu'il fonctionne récursivement sur les objets.

function post(url, params, urlEncoded, newWindow) {
    var form = $('<form />').hide();
    form.attr('action', url)
        .attr('method', 'POST')
        .attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data');
    if(newWindow) form.attr('target', '_blank');

    function addParam(name, value, parent) {
        var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name);
        if(value instanceof Object) {
            for(var i in value) {
                addParam(i, value[i], fullname);
            }
        }
        else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
    };

    addParam('', params, '');

    $('body').append(form);
    form.submit();
}

1

Vous pouvez ajouter dynamiquement le formulaire à l'aide de DHTML, puis le soumettre.



1

J'utilise le document.forms java et le boucle pour obtenir tous les éléments du formulaire, puis envoie via xhttp. Voici donc ma solution pour javascript / ajax submit (avec tous les html inclus comme exemple):

          <!DOCTYPE html>
           <html>
           <body>
           <form>
       First name: <input type="text" name="fname" value="Donald"><br>
        Last name: <input type="text" name="lname" value="Duck"><br>
          Addr1: <input type="text" name="add" value="123 Pond Dr"><br>
           City: <input type="text" name="city" value="Duckopolis"><br>
      </form> 



           <button onclick="smc()">Submit</button>

                   <script>
             function smc() {
                  var http = new XMLHttpRequest();
                       var url = "yourphpfile.php";
                     var x = document.forms[0];
                          var xstr = "";
                         var ta ="";
                    var tb ="";
                var i;
               for (i = 0; i < x.length; i++) {
     if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{
       tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value;
             } }

           xstr = ta+tb;
      http.open("POST", url, true);
       http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

      http.onreadystatechange = function() {
          if(http.readyState == 4 && http.status == 200) {

        // do whatever you want to with the html output response here

                } 

               }
            http.send(xstr);

              }
         </script>

         </body>
     </html>

1

Vous pouvez utiliser la méthode de déclenchement de jQuery pour envoyer le formulaire, tout comme vous appuyez sur un bouton, comme ça,

$('form').trigger('submit')

il sera soumis sur le navigateur.


0

La méthode que j'utilise pour publier et diriger automatiquement un utilisateur vers une autre page consiste à simplement écrire un formulaire masqué, puis à le soumettre automatiquement. Soyez assuré que le formulaire caché ne prend absolument aucun espace sur la page Web. Le code serait quelque chose comme ceci:

    <form name="form1" method="post" action="somepage.php">
    <input name="fielda" type="text" id="fielda" type="hidden">

    <textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
    document.getElementById('fielda').value="some text for field a";
    document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
    form1.submit();

Demande de soumission automatique

Une application de soumission automatique dirigerait les valeurs de formulaire que l'utilisateur mettrait automatiquement sur l'autre page vers cette page. Une telle application serait comme ceci:

fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
  <input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}

0

Voici comment je le fais.

function redirectWithPost(url, data){
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;

        for(var key in data){
            var input = document.createElement('input');
            input.name = key;
            input.value = data[key];
            input.type = 'hidden';
            form.appendChild(input)
        }
        document.body.appendChild(form);
        form.submit();
    }

0

Aucune des solutions ci-dessus ne gère les paramètres imbriqués profonds avec juste jQuery, voici donc ma solution à deux cents.

Si vous utilisez jQuery et que vous devez gérer des paramètres imbriqués profonds, vous pouvez utiliser cette fonction ci-dessous:

    /**
     * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
     * I just simplified it for my own taste.
     */
    function postForm(parameters, url) {

        // generally we post the form with a blank action attribute
        if ('undefined' === typeof url) {
            url = '';
        }


        //----------------------------------------
        // SOME HELPER FUNCTIONS
        //----------------------------------------
        var getForm = function (url, values) {

            values = removeNulls(values);

            var form = $('<form>')
                .attr("method", 'POST')
                .attr("action", url);

            iterateValues(values, [], form, null);
            return form;
        };

        var removeNulls = function (values) {
            var propNames = Object.getOwnPropertyNames(values);
            for (var i = 0; i < propNames.length; i++) {
                var propName = propNames[i];
                if (values[propName] === null || values[propName] === undefined) {
                    delete values[propName];
                } else if (typeof values[propName] === 'object') {
                    values[propName] = removeNulls(values[propName]);
                } else if (values[propName].length < 1) {
                    delete values[propName];
                }
            }
            return values;
        };

        var iterateValues = function (values, parent, form, isArray) {
            var i, iterateParent = [];
            Object.keys(values).forEach(function (i) {
                if (typeof values[i] === "object") {
                    iterateParent = parent.slice();
                    iterateParent.push(i);
                    iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
                } else {
                    form.append(getInput(i, values[i], parent, isArray));
                }
            });
        };

        var getInput = function (name, value, parent, array) {
            var parentString;
            if (parent.length > 0) {
                parentString = parent[0];
                var i;
                for (i = 1; i < parent.length; i += 1) {
                    parentString += "[" + parent[i] + "]";
                }

                if (array) {
                    name = parentString + "[" + name + "]";
                } else {
                    name = parentString + "[" + name + "]";
                }
            }

            return $("<input>").attr("type", "hidden")
                .attr("name", name)
                .attr("value", value);
        };


        //----------------------------------------
        // NOW THE SYNOPSIS
        //----------------------------------------
        var generatedForm = getForm(url, parameters);

        $('body').append(generatedForm);
        generatedForm.submit();
        generatedForm.remove();
    }

Voici un exemple d'utilisation. Le code html:

<button id="testButton">Button</button>

<script>
    $(document).ready(function () {
        $("#testButton").click(function () {
            postForm({
                csrf_token: "abcd",
                rows: [
                    {
                        user_id: 1,
                        permission_group_id: 1
                    },
                    {
                        user_id: 1,
                        permission_group_id: 2
                    }
                ],
                object: {
                    apple: {
                        color: "red",
                        age: "23 days",
                        types: [
                            "golden",
                            "opal",
                        ]
                    }
                },
                the_null: null, // this will be dropped, like non-checked checkboxes are dropped
            });
        });
    });
</script>

Et si vous cliquez sur le bouton de test, il affichera le formulaire et vous obtiendrez les valeurs suivantes dans POST:

array(3) {
  ["csrf_token"] => string(4) "abcd"
  ["rows"] => array(2) {
    [0] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "1"
    }
    [1] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "2"
    }
  }
  ["object"] => array(1) {
    ["apple"] => array(3) {
      ["color"] => string(3) "red"
      ["age"] => string(7) "23 days"
      ["types"] => array(2) {
        [0] => string(6) "golden"
        [1] => string(4) "opal"
      }
    }
  }
}

Remarque: si vous souhaitez publier le formulaire dans une autre URL que la page actuelle, vous pouvez spécifier l'URL comme deuxième argument de la fonction postForm.

Ainsi, par exemple (pour réutiliser votre exemple):

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

J'espère que cela t'aides.

Note2: le code a été extrait du plugin de redirection . Je l'ai simplement simplifié pour mes besoins.


-1

Plugin jQuery pour redirection avec POST ou GET:

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js

Pour tester, incluez le fichier .js ci-dessus ou copiez / collez la classe dans votre code, puis utilisez le code ici, en remplaçant "args" par vos noms de variable et "values" par les valeurs de ces variables respectives:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

Cela a également été mentionné ici: stackoverflow.com/questions/8389646/…
OG Sean

Cette solution fonctionne toujours bien pour nous, si vous l'avez rejetée, veuillez laisser un commentaire expliquant pourquoi.
OG Sean

-2

Vous pouvez effectuer un appel AJAX (probablement en utilisant une bibliothèque telle que l'utilisation de Prototype.js ou JQuery). AJAX peut gérer les options GET et POST.


5
L'utilisation de XMLHttpRequest ne dirigerait pas le navigateur vers une autre page.
Jonny Buchanan,
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.