jQuery - przekierowanie z danymi postu


81

Jak mogę przekierować z danymi postów?

Jak przejść do nowej strony z $_POST ?

Jak to zrobić? Jak to się robi i dlaczego to się stanie


6
Jestem bardzo zainteresowany tą odpowiedzią.
Sterling Archer

1
Nie można ustawić lokalizacji systemu Windows za pomocą żądania POST, tylko żądań GET i nie można przekierować żądania POST, więc typowym rozwiązaniem jest dynamiczne utworzenie formularza z wymaganymi atrybutami danych i akcji i przesłanie go.
adeneo

Zapomniałeś o tagu PHP, czy jQuery ma $_POSTzmienną?
Alex W

@ y2k, czy to nie jest to samo pytanie co stackoverflow.com/q/8389646/632951 ?
Pacerier

Odpowiedzi:


90

Istnieje wtyczka JQuery, która realizuje prawie to, co próbujesz zrobić: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js .

Po dołączeniu JQuery i wtyczki jquery.redirect.min.js możesz po prostu zrobić coś takiego:

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

Zamiast tego użyj następującego kodu w nowszych wersjach JQuery:

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

Mam nadzieję że to pomoże!


@TimS, po sprawdzeniu tego linku, nadal nie jestem pewien, w jaki sposób możesz odzyskać dane na nowej stronie za pomocą postu.
Yehuda Gutstein

nieważne, rozgryzłem to i uruchomiłem. Świetna sugestia!
Yehuda Gutstein

<script type = "text / javascript"> $ (). redirect (' localhost: 8080 / vabc / index.php # data / t.php? param = 12 & edit = 2 ', {'e': 'error'}) ; Nie działa. Mam również <form> z kilkoma innymi zmiennymi post, które najpierw wysyłają wiadomość na tę samą stronę, a po przetworzeniu używam przekierowania jquery, aby przekierować na inną stronę z kilkoma nowymi zmiennymi post.
TommyT

19
Używając jquery 2.1.3 i poprawnej składni dla mnie to $ .redirect (...); Bez nawiasów.
KDT

Nie możemy więc przekierować na inny adres URL i wysyłać postów na inny>?
TommyT

90

Oto prosta mała funkcja, którą można zastosować w dowolnym miejscu, o ile używasz 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();
    }
});

Zgodnie z komentarzami rozszerzyłem moją odpowiedź:

// 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();
    }
});

9
dodaj .appendTo('body')na urządzenia mobilne ... przykład: $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();pomysł oparty na tej odpowiedzi
CrandellWS

4
To rozwiązanie jest dużo lepsze niż przyjęta odpowiedź imo. Jest łatwy do wdrożenia i nie ma potrzeby ładowania dodatkowych bibliotek!
Matej Svajger

3
Otrzymuję $ .redirectPost nie jest błędem funkcji podczas próby użycia tego.
Rafiki

1
Świetny pomysł z rozszerzeniem. Jednak ta implementacja nie powoduje zmiany znaczenia wartości przed umieszczeniem ich w value=""atrybucie. Zatem jeśli wartość zawiera cudzysłowy, nie działa. Samą funkcję można zastąpić taką, która jest świadoma cytowania, tak jak tutaj: stackoverflow.com/a/5533477/1775065
cronfy

8

Dlaczego po prostu nie utworzyć formularza z ukrytymi danymi wejściowymi i nie przesłać go za pomocą jQuery? Powinno działać :)


Nie będzie działać z przesyłaniem plików metodą drag'n'drop. Ze względów bezpieczeństwa nie można przypisać wejścia do pliku.
mlt

Nie przychodzi mi do głowy żadna sytuacja, w której możesz chcieć przekierować użytkownika gdzieś i zmusić go do przesłania pliku z tym samym żądaniem. Ale oczywiście - to prawda, w tym przypadku to nie zadziała.
kao3991

@mlt Nie jestem pewien, dlaczego to nie zadziała. Nie przypisujesz niczego do pliku wejściowego, ale używasz innych ukrytych pól wejściowych, które są publikowane w tym samym czasie, co formularz.
Danosaure

3

Zanim dokument / okno będzie gotowe, dodaj „rozszerz” do 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();
    }
});

Posługiwać się :

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

Uwaga: ta metoda nie może publikować plików.


2

Myślę, że to najlepszy sposób na zrobienie tego!

<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>

Będzie to prawie natychmiastowe, a użytkownik nic nie zobaczy!


2

Spowoduje to przekierowanie z opublikowanymi danymi

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

    }

funkcja .submit () automatycznie przesyła do adresu URL, funkcja .remove ()
zabija formularz po przesłaniu


1

To wymaga wyjaśnienia. Czy Twój serwer obsługuje POST, który chcesz przekierować gdzie indziej? A może chcesz przekierować żądanie regulatora GET na inną stronę, która oczekuje na POST?

W każdym przypadku możesz zrobić coś takiego:

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

Prawdopodobnie dobrym pomysłem jest utworzenie linku z napisem „kliknij tutaj, jeśli nie nastąpi automatyczne przekierowanie”, aby poradzić sobie z blokadami wyskakujących okienek.


1

Podobna do powyższej odpowiedzi, ale napisana inaczej.

$.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();
    }
});

0

dlaczego nie po prostu użyć przycisku zamiast przesyłania. kliknięcie przycisku pozwoli Ci stworzyć odpowiedni adres URL, na który przekierowuje Twoja przeglądarka.

$("#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);
});

4
Spowoduje to po prostu normalne żądanie GET, gdy zmienia się adres URL. Pierwotne pytanie dotyczyło żądania POST.
pjotr_dolphin

0

Umieściłem wtyczkę jquery.redirect.min.js w sekcji head wraz z tym rozwiązaniem json do przesyłania danych

<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>

Następnie zaraz po dodaniu formularza

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

Uwaga: Wejścia powinny być wejściami Ids, NIE nazwami!
kpatrickos

0

Skonstruuj i wypełnij ukryty formularz method = POST action = "http://example.com/vote" i prześlij go, zamiast używać w ogóle window.location.

lub

$('#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();

0

„rozszerzył” powyższe rozwiązanie celem. Z jakiegoś powodu potrzebowałem możliwości przekierowania posta do _blank lub innej ramki:

$.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();
       }
   });
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.