GET/POST non-ajax en utilisant jQuery (plugin?)

Question

C'est l'une de ces situations où je me sens comme si je manque un mot-clé essentielle pour trouver la réponse sur Google ...

J'ai un sac de paramètres et je veux que le navigateur navigue vers une URL GET avec les paramètres. Être un utilisateur jQuery, je sais que si je voulais faire une demande de paiement ajax, je voudrais simplement faire:

$.getJSON(url, params, fn_handle_result); 

Mais parfois, je ne veux pas utiliser ajax. Je veux juste soumettre les paramètres et récupérer une page. Maintenant, je sais que je peux boucler les paramètres et construire manuellement une URL GET. Pour POST, je peux créer dynamiquement un formulaire, le remplir avec des champs et soumettre. Mais je suis sûr que quelqu'un a écrit un plugin qui le fait déjà. Ou peut-être que j'ai raté quelque chose et que vous pouvez le faire avec core jQuery.

Alors, quelqu'un connaît-il un tel plugin?

EDIT: En fait, ce que je veux est d'écrire:

$.goTo(url, params); 

et éventuellement

$.goTo(url, params, "POST"); 

Answer 1

jQuery Plugin semblait fonctionner à merveille jusqu'à ce que je l'ai essayé sur IE8. J'ai dû faire cette légère modification pour le faire fonctionner sur IE:

(function($) { 
    $.extend({ 
     getGo: function(url, params) { 
      document.location = url + '?' + $.param(params); 
     }, 
     postGo: function(url, params) { 
      var $form = $("<form>") 
       .attr("method", "post") 
       .attr("action", url); 
      $.each(params, function(name, value) { 
       $("<input type='hidden'>") 
        .attr("name", name) 
        .attr("value", value) 
        .appendTo($form); 
      }); 
      $form.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery); 

Answer 2

Il est difficile de conclure à la question si vous avez un groupe aléatoire de valeurs que vous voulez passer sur la chaîne de requête ou est-ce des valeurs de formulaire.

Pour les valeurs de formulaire, utilisez simplement la fonction .serialize pour construire la chaîne de requête.

par exemple

var qString = $('#formid').serialize(); 
document.location = 'someUrl' + '?' + serializedForm 

Si vous avez un groupe aléatoire de valeurs que vous pouvez construire un objet et utiliser la méthode utilitaire .param.

par exemple

var params = { width:1680, height:1050 }; 
var str = jQuery.param(params); 
console.log(str) 
// prints width=1680&height=1050 
// document.location = 'someUrl' + '?' + str 

Answer 3

La réponse acceptée ne semble pas couvrir vos besoins POST, comme la mise en document.location entraînera toujours une requête GET. Voici une solution possible, bien que je ne suis pas sûr permis jQuery chargement le contenu de la page comme ceci:

$.post(url, params, function(data) { 
    $(document).html(data); 
}, "html"); 

Answer 4

Voici ce que je fini par faire, en utilisant la pointe de redsquare:

(function($) { 
    $.extend({ 
     doGet: function(url, params) { 
      document.location = url + '?' + $.param(params); 
     }, 
     doPost: function(url, params) { 
      var $form = $("<form method='POST'>").attr("action", url); 
      $.each(params, function(name, value) { 
       $("<input type='hidden'>") 
        .attr("name", name) 
        .attr("value", value) 
        .appendTo($form); 
      }); 
      $form.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery); 

Utilisation:

$.doPost("/mail/send.php", { 
    subject: "test email", 
    body: "This is a test email sent with $.doPost" 
}); 

Tous les commentaires seraient les bienvenus.

Mise à jour: voir la réponse de dustin pour une version qui fonctionne dans IE8

Answer 5

Bon travail itsadok!Si vous voulez une forme invisible mettre en DIV cachée:

(function($) { 
    $.extend({ 
     doGet: function(url, params) { 
      document.location = url + '?' + $.param(params); 
     }, 
     doPost: function(url, params) { 
      var $div = $("<div>").css("display", "none"); 
      var $form = $("<form method='POST'>").attr("action", url); 
      $.each(params, function(name, value) { 
       $("<input type='hidden'>") 
        .attr("name", name) 
        .attr("value", value) 
        .appendTo($form); 
      }); 
      $form.appendTo($div); 
      $div.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery); 

Answer 6

Pour votre information pour tous ceux qui font le doPost pour rails 3, vous devez ajouter dans le jeton CSRF, Ajouter ce qui suit à la réponse devrait le faire ...

var token = $('meta[name="csrf-token"]').attr('content'); 
$("<input name='authenticity_token' type='hidden' value='" + token + "'/>").appendTo($form); 

Answer 7

Ceci est similaire à ce qui précède, sauf qu'il se chargera des paramètres de réseau étant passés à MVC

(function($) { 
    $.extend({ 
     getGo: function(url, params, traditional) { 
      /// <summary> 
      ///  Perform a GET at url with specified params passed as part of the query string. 
      /// </summary> 
      /// <param name="url"></param> 
      /// <param name="params"></param> 
      /// <param name="traditional">Boolean: Specify true for traditional serialization.</param> 
      document.location = url + '?' + $.param(params, traditional); 
     }, 
     postGo: function (url, params) { 
      /// <summary> 
      ///  Perform a POST at url with the specified params as part of a form object. 
      ///  If a parameter is an array then it will submit it as multiple attributes so MVC will see it as an array 
      /// </summary> 
      /// <param name="url" type="string"></param> 
      /// <param name="params" type="Object"></param> 
      var $form = $("<form>").attr("method", "post").attr("action", url); 
      $.each(params, function (name, value) { 
       if (value.length != null && value.length > 0) { 
        for (var i = 0; i < value.length; i++) { 
         $("<input type='hidden'>").attr("name", name + '[' + i + ']').attr("value", value[i]).appendTo($form); 
        } 
       } 
       else { 
        $("<input type='hidden'>").attr("name", name).attr("value", value).appendTo($form); 
       } 
      }); 
      $form.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery);