javascript - para - jquery-3.3.1.min.js download

GET/POST no Ajax que usa jQuery(¿complemento?)

Question

Esta 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. Al ser un usuario de jQuery, sé que si quisiera hacer una solicitud de Ajax, simplemente lo haría:

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

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

$.goTo(url, params);

Y opcionalmente

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

Answer 1

La respuesta aceptada no parece cubrir su requisito de POST, ya que la configuración de document.location siempre dará como resultado una solicitud GET. Aquí hay una posible solución, aunque no estoy seguro de que jQuery permita cargar todo el contenido de la página de esta manera:

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

Answer 2

No queda claro a partir de la pregunta si tiene un conjunto aleatorio de valores que desea pasar en la cadena de consulta o si se trata de valores de formulario.

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

p.ej

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

Si tiene un grupo aleatorio de valores, puede construir un objeto y usar el método de utilidad .param .

p.ej

 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

jQuery Plugin parecía funcionar muy bien hasta que lo intenté 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 4

Esto es lo que terminé haciendo, usando la sugerencia 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: vea la respuesta de dustin para una versión que funciona en IE8

Answer 5

¡Buen trabajo, itsadok! Si quieres un formulario invisible ponlo 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 rieles 3, necesita agregar el token CSRF, Agregar lo siguiente a la respuesta debería hacer eso ...

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

Answer 7

Esto es similar al anterior, excepto que manejará los parámetros de Array que se pasan 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);