no ajax GET/POST usando jQuery (plug-in?)

Question

Ésta es una de esas situaciones en las que siento que me falta una palabra clave crucial para encontrar la respuesta en Google ...

tengo una bolsa de parámetros y quiero hacer que el navegador navegue a una URL GET con los parámetros. Ser un usuario jQuery, sé que si quería hacer una petición Ajax, simplemente me gustaría hacer:

$.getJSON(url, params, fn_handle_result); 

Pero a veces no quiero usar ajax. Solo quiero enviar los parámetros y recuperar una página.

Ahora, sé que puedo recorrer los parámetros y construir manualmente una URL GET. Para POST, puedo crear dinámicamente un formulario, rellenarlo con campos y enviarlo. Pero estoy seguro de que alguien ha escrito un complemento que ya lo hace. O tal vez me perdí algo y puedes hacerlo con core jQuery.

Entonces, ¿alguien sabe de tal plugin?

EDIT: Básicamente, lo que quiero es escribir:

$.goTo(url, params); 

y opcionalmente

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

Answer 1

jQuery Plugin parecía funcionar bien hasta que lo probé en IE8. Tuve que hacer esta pequeña modificación para que funcione en 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

No está claro a partir de la pregunta si usted tiene un montón aleatoria de los valores que desea pasar en la cadena de consulta o es valores de forma.

Para los valores de formulario simplemente use la función .serialize para construir la cadena de consulta.

por ejemplo

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

Si usted tiene un montón aleatoria de valores que se pueden construir un objeto y utilizar el método .param utilidad.

por ejemplo

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 respuesta aceptada no parece cubrir sus necesidades POST, como el establecimiento document.location siempre resultará en una petición GET. He aquí una posible solución, aunque no estoy seguro de permisos jQuery cargar todo el contenido de la página como esta:

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

Answer 4

Esto es lo que terminé haciendo, usando la punta 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); 

Uso:

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

Cualquier comentario sería bienvenido.

Actualización: Ver respuesta de Dustin como una versión que funciona en IE8

Answer 5

Buen trabajo itsadok!Si quieres una forma invisible puso en DIV oculto:

(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 para cualquiera que haga el doPost para los carriles 3, es necesario agregar en el token CSRF, Añadiendo que debe hacer lo siguiente para la respuesta ...

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

Answer 7

Esto es similar a la anterior, excepto que se encargará de parámetros de la matriz que se pasa a 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);