jQuery - Redirigir con datos de publicación

81

¿Cómo puedo redirigir con datos de publicaciones?

¿Cómo pasar a una nueva página con $_POST?

¿Como hacer esto? ¿Cómo se hace y por qué se hará?

— y2k
fuente

6

De hecho, estoy muy interesado en escuchar esta respuesta.

— Sterling Archer

1

No es posible establecer la ubicación de Windows con una solicitud POST, solo solicitudes GET, y no es posible redirigir una solicitud POST, por lo que la solución habitual es crear dinámicamente un formulario con los datos necesarios y el atributo de acción, y enviarlo.

— Adeneo

¿Olvidas la etiqueta PHP o jQuery tiene una $_POSTvariable?

— Alex W

@ y2k, ¿no es esta la misma pregunta que stackoverflow.com/q/8389646/632951 ?

— Pacerier

90

Hay un complemento de JQuery que logra prácticamente lo que está tratando de hacer: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js .

Después de incluir JQuery y el complemento jquery.redirect.min.js, simplemente puede hacer algo como esto:

$().redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

En su lugar, use el siguiente código en las versiones más recientes de JQuery:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

¡Espero que esto ayude!

— Tim S
fuente

@TimS, después de verificar ese enlace, todavía no tengo claro cómo puede recuperar los datos en la nueva página usando post.

— Yehuda Gutstein

no importa, lo descubrí y lo hice funcionar. ¡Gran sugerencia!

— Yehuda Gutstein

— TommyT

19

Usando jquery 2.1.3 y la sintaxis correcta para mí fue $ .redirect (...); Sin paréntesis.

— KDT

¿Entonces no podemos redirigir a una URL diferente y publicar en una diferente>?

— TommyT

90

Aquí hay una pequeña función simple que se puede aplicar en cualquier lugar siempre que use jQuery.

var redirect = 'http://www.website.com/page?id=23231';
$.redirectPost(redirect, {x: 'example', y: 'abc'});

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();
    }
});

Según los comentarios, he ampliado mi respuesta:

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = $('<form></form>');
        form.attr("method", "post");
        form.attr("action", location);

        $.each( args, function( key, value ) {
            var field = $('<input></input>');

            field.attr("type", "hidden");
            field.attr("name", key);
            field.attr("value", value);

            form.append(field);
        });
        $(form).appendTo('body').submit();
    }
});

— tfont
fuente

9

agregar .appendTo('body')para dispositivos móviles ... ejemplo: $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();idea basada en esta respuesta

— CrandellWS

4

Esta solución es mucho mejor que la respuesta aceptada en mi opinión. ¡Es fácil de implementar y no es necesario cargar bibliotecas adicionales!

— Matej Svajger

3

Me sale $ .redirectPost no es un error de función cuando intento usar esto.

— Rafiki

1

Gran idea con extensión. Pero esta implementación no escapa a los valores antes de ponerlos en value=""atributo. Por lo tanto, si el valor contiene comillas, no funciona. La función en sí se puede reemplazar con una que esté al tanto de las citas, como desde aquí: stackoverflow.com/a/5533477/1775065

— cronfy

8

¿Por qué no crear un formulario con algunas entradas ocultas y enviarlo usando jQuery? Deberia trabajar :)

— kao3991
fuente

No funcionará con cargas de archivos de arrastrar y soltar. No puede asignar entrada de archivo por razones de seguridad.

— mlt

No puedo pensar en ninguna situación en la que desee redirigir al usuario a algún lugar y hacer que cargue un archivo con la misma solicitud. Pero, por supuesto, es cierto, no funcionará en este caso.

— kao3991

@mlt No estoy seguro de por qué no funcionaría. No asigna nada a la entrada del archivo, pero utiliza otros campos ocultos de entrada que se publican al mismo tiempo que su formulario.

— Danosaure

3

Antes de que el documento / ventana esté listo, agregue "extender" a jQuery:

$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {

            form += '<input type="hidden" name="'+value.name+'" value="'+value.value+'">';
            form += '<input type="hidden" name="'+key+'" value="'+value.value+'">';
        });
        $('<form action="'+location+'" method="POST">'+form+'</form>').submit();
    }
});

Utilizar :

$.redirectPost("someurl.com", $("#SomeForm").serializeArray());

Nota: este método no puede publicar archivos.

— sagie212
fuente

2

¡Creo que esta es la mejor manera de hacerlo!

<html>
<body onload="document.getElementById('redirectForm').submit()">
<form id='redirectForm' method='POST' action='/done.html'>
<input type='hidden' name='status' value='complete'/>
<input type='hidden' name='id' value='0u812'/>
<input type='submit' value='Please Click Here To Continue'/>
</form>
</body>
</html>

¡Esto será casi instantáneo y el usuario no verá nada!

— Prashant Singh
fuente

2

Esto redirigiría con los datos publicados.

$(function() {
       $('<form action="url.php" method="post"><input type="hidden" name="name" value="value1"></input></form>').appendTo('body').submit().remove();
    });

    }

la función .submit () realiza el envío a la URL automáticamente
la función .remove () elimina el formulario después de enviar

— Tobiloba
fuente

1

Esto necesita una aclaración. ¿Su servidor está manejando un POST que desea redirigir a otro lugar? ¿O desea redirigir una solicitud GET regular a otra página que espera un POST?

En cualquier caso, lo que puede hacer es algo como esto:

var f = $('<form>');
$('<input>').attr('name', '...').attr('value', '...');
//after all fields are added
f.submit();

Probablemente sea una buena idea crear un vínculo que diga "haga clic aquí si no se redirige automáticamente" para tratar los bloqueadores de ventanas emergentes.

— LameCoder
fuente

1

Similar a la respuesta anterior, pero escrita de manera diferente.

$.extend(
{
    redirectPost: function (location, args) {
        var form = $('<form>', { action: location, method: 'post' });
        $.each(args,
            function (key, value) {
                $(form).append(
                    $('<input>', { type: 'hidden', name: key, value: value })
                );
            });
        $(form).appendTo('body').submit();
    }
});

— Alan
fuente

0

¿Por qué no usar un botón en lugar de enviar? hacer clic en el botón le permitirá construir una URL adecuada para que su navegador lo redireccione.

$("#button").click(function() {
   var url = 'site.com/process.php?';
   $('form input').each(function() {
       url += 'key=' + $(this).val() + "&";
   });
   // handle removal of last &.

   window.location.replace(url);
});

— Radney Aaron Alquiza
fuente

4

Esto solo provocará una solicitud GET normal ya que la URL está cambiando. La pregunta original era hacer una solicitud POST.

— pjotr_dolphin

0

Incluí el complemento jquery.redirect.min.js en la sección principal junto con esta solución json para enviar con datos

<script type="text/javascript">     
    $(function () {
     $('form').on('submit', function(e) {
       $.ajax({
        type: 'post',
        url: 'your_POST_URL',
        data: $('form').serialize(),
        success: function () {
         // now redirect
         $().redirect('your_POST_URL', {
          'input1': $("value1").val(), 
          'input2': $("value2").val(),
      'input3': $("value3").val()
       });
      }
   });
   e.preventDefault();
 });
 });
 </script>

Luego, inmediatamente después del formulario que agregué

 $(function(){
     $( '#your_form_Id' ).submit();
    });

— kpatrickos
fuente

Nota: Las entradas deben ser ID de entrada, NO nombres.

— kpatrickos

0

Construya y complete un método oculto = POST action = "http://example.com/vote" formulario y envíelo, en lugar de usar window.location en absoluto.

o

$('#inset_form').html(
   '<form action="url" name="form" method="post" style="display:none;">
    <input type="text" name="name" value="' + value + '" /></form>');
document.forms['form'].submit();

— Daniel Kennedy
fuente

0

"extendió" la solución anterior con target. Por alguna razón, necesitaba la posibilidad de redirigir la publicación a _blank u otro marco:

$.extend(
   {
       redirectPost: function(location, args, target = "_self")
       {
           var form = $('<form></form>');
           form.attr("method", "post");
           form.attr("action", location);
           form.attr("target", target);
           $.each( args, function( key, value ) {
               var field = $('<input></input>');
               field.attr("type", "hidden");
               field.attr("name", key);
               field.attr("value", value);
               form.append(field);
           });
           $(form).appendTo('body').submit();
       }
   });

— ThoCra
fuente