web-dev-qa-db-fra.com

Simuler l'envoi d'un formulaire avec un appel de fonction avec javascript

Avec jQuery, nous pouvons simuler l'envoi d'un formulaire:

<form id="form1" method="post">
    <input name="key1" value="value1" />
    <input name="key2" value="value2" />
</form>

Avec un appel de fonction AJAX:

$.post('', { key1: 'value1', key2: 'value2' }, function() {
   // do call back
});

Si nous utilisons jquery.form.js

$('#form1').ajaxSubmit({
    success: function() {
        // do call back
    }
});

Ok, voici ma question:

Je n'ai pas le formulaire dans le balisage et je souhaite soumettre un formulaire avec du contenu dynamique en utilisant la méthode 'POST'.

Je souhaite effectuer un appel de fonction pour simuler la procédure, par exemple:

utils.post('/url', {key1: 'value1', key2: 'value2'});

Après cet appel, l'effet est identique au formulaire que j'ai ci-dessus et je le soumets, de manière naturelle et synchronisée.

Y a-t-il une bonne façon de faire cela?

Si le problème n'est pas clair, je peux donner un exemple laid pour expliquer ce que je veux:

util.post = function(url, fields) {
    var $form = $('<form action="'+url+'" method="post"></form>');
    var key, val;
    for(key in fields) {
        if(fields.hasOwnProperty(key)) {
            val = fields[key];
            $form.append('<input type="hidden" name="'+key+'" value="'+val+'" />');
        }
    }
    $form.submit();
}

La méthode ci-dessus fonctionne mais je pense que ce n’est pas assez agréable. Lorsque les champs ont un caractère spécial ou autre chose, cela peut provoquer une erreur.

javascriptjqueryajaxforms
13
Alfred Huang

Vous pouvez utiliser jQuery pour construire le formulaire de manière fonctionnelle, plutôt que de concaténer des chaînes, afin que les caractères spéciaux ne posent pas de problème.

Vous devrez joindre ce formulaire à la variable HTML body avant de le soumettre; les versions récentes de Chrome exigent maintenant cela .

var util = {};
util.post = function(url, fields) {
    var $form = $('<form>', {
        action: url,
        method: 'post'
    });
    $.each(fields, function(key, val) {
         $('<input>').attr({
             type: "hidden",
             name: key,
             value: val
         }).appendTo($form);
    });
    $form.appendTo('body').submit();
}
26
Barmar

Étant donné que la réponse acceptée peut ne plus fonctionner, par ex. Navigateurs à base de chrome dans certaines circonstances, voici une solution de contournement:

util.post = function(url, fields) {
  var $form = $('<form>', {
    action: url,
    method: 'post'
  }).append(
    $.map(fields, function(key, val) {
      return $('<input>').attr({
         type: "hidden",
         name: key,
         value: val
      }).appendTo($form);
    })
  )
  var w = window.open("about:blank")
  w.document.write($form[0].outerHTML)
  w.document.forms[0].submit()
}
1
Brian M. Hunt

Votre seul problème est que, puisque vous n'avez pas de champs de formulaire pour obtenir des données, vous ne pouvez pas utiliser .serialize pour construire le tableau. Vous devez juste construire le tableau manuellement.

Key1 ... Keyn peut être des noms que vous attribuez à la place d'attributs de nom de champs de formulaire (c'est ce que fait réellement la sérialisation) et les valeurs peuvent être ce que vous voulez:

  • html d'un div;
  • valeurs calculées par vous;
  • variables javascript;
  • valeurs provenant de db;

Le fait est que vous ne simulez pas la publication d'un formulaire dans tous les cas. Avec ajax, vous êtes juste ce qui le rend asynchrone et cela vous aide car vous n'avez pas besoin de changer/recharger la page pour élaborer les résultats du formulaire.

0
Lelio Faieta