GET non Ajax/POST utilizzando jQuery (plug-in?)

Question

Questa è una di quelle situazioni in cui mi sento come mi manca una parola chiave fondamentale per trovare la risposta su Google ...

Ho un sacco di parametri e voglio far navigare il browser verso un URL GET con i parametri. Essendo un utente jQuery, so che se volevo fare una richiesta AJAX, vorrei semplicemente fare:

$.getJSON(url, params, fn_handle_result); 

Ma a volte io non voglio usare Ajax. Voglio solo inviare i parametri e ottenere una pagina indietro.

Ora, so che posso eseguire il loop dei parametri e costruire manualmente un URL GET. Per POST, posso creare dinamicamente un modulo, popolarlo con i campi e inviare. Ma sono sicuro che qualcuno abbia già scritto un plugin che lo faccia già. O forse mi sono perso qualcosa e puoi farlo con core jQuery.

Quindi, qualcuno sa di un tale plug-in?

EDIT: Fondamentalmente, quello che voglio è quello di scrivere:

$.goTo(url, params); 

e opzionalmente

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

Answer 1

jQuery Plugin sembrava funzionare grande fino a quando ho provato su IE8. Ho dovuto apportare questa leggera modifica per farlo funzionare su 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

Non è chiaro dalla questione se si dispone di un gruppo casuale di valori che si desidera passare sulla querystring o si tratta di valori di forma.

Per i valori dei moduli, utilizzare la funzione .serialize per costruire la querystring.

es

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

Se ha un mucchio casuale di valori si può costruire un oggetto e utilizzare il metodo .param utilità.

es

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 risposta accettata non sembra coprire il fabbisogno POST, come l'impostazione document.location sarà sempre tradursi in una richiesta GET. Ecco una possibile soluzione, anche se non sono sicuro che i permessi di jQuery loading l'intero contenuto della pagina come questa:

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

Answer 4

Ecco quello che ho finito per fare, usando la punta da 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); 

Utilizzo:

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

Qualsiasi commento sarebbe benvenuto.

Update: la risposta sede di Dustin per una versione che funziona in IE8

Answer 5

Buon lavoro!Se si desidera una forma invisibile metterlo in DIV nascosta:

(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

FYI per chiunque fare il doPost per le rotaie 3, è necessario aggiungere nel token CSRF, aggiunta dei seguenti alla risposta dovrebbe farlo ...

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

Answer 7

Questo è simile al precedente tranne che gestirà i parametri di array vengono passati al 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);