przekazuj dane pocztowe za pomocą window.location.href

113

Korzystając z window.location.href, chciałbym przekazać dane POST do nowej strony, którą otwieram. czy jest to możliwe przy użyciu JavaScript i jQuery?

Brian
źródło
11
Ustawienie window.location.hrefpowoduje żądanie GET dla nowego adresu URL, a nie POST.
Chetan S

Odpowiedzi:

85

Przy użyciu window.location.hrefnie można wysłać żądania POST.

Musisz tylko ustawić formtag z polami danych, ustawić actionatrybut formularza na adres URL i methodatrybut na POST, a następnie wywołać submitmetodę na formtagu.

Guffa
źródło
Mam dane pochodzące z 3 różnych formularzy i próbuję wysłać wszystkie 3 formularze na tę samą stronę, więc próbowałem serializować formularze za pomocą jQuery i wysłać je w inny sposób
Brian
@Brian: Nie możesz po prostu umieścić wszystkiego w jednym form, aby wszystko było wysyłane razem automatycznie?
Marcel Korpel
Jeden formularz znajduje się w oknie dialogowym jQueryUI - więc nie mogę po prostu dołączyć ich wszystkich.
Brian
12
Wyciągnij wszystkie ich wartości, dynamicznie utwórz formularz ze wszystkimi polami we wszystkich trzech formularzach i prześlij ten formularz. Formularz może być niewidoczny. Nie używaj metody JQuery AJAX, użyj $("#myForm").submit(). Formularz - który będzie niewidoczny i używany tylko do przesyłania wartości z kodu po stronie klienta, a nie danych wejściowych użytkownika - nigdy nie będzie wyświetlany ani używany w inny sposób, a strona zostanie odświeżona.
Matt Luongo
79

Dodaj formularz do kodu HTML, na przykład:

<form style="display: none" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

i użyj JQuery, aby wypełnić te wartości (oczywiście możesz również użyć javascript, aby zrobić coś podobnego)

$("#var1").val(value1);
$("#var2").val(value2);

Na koniec wyślij formularz

$("#form").submit();

po stronie serwera powinieneś być w stanie uzyskać przesłane dane, sprawdzając, var1a var2jak to zrobić, zależy od używanego języka po stronie serwera.

Mohamed Khamis
źródło
kiedy to robię, moja przeglądarka przekierowuje do domeny / undefined. Co ja robię źle?
vigamage
9

Użyj tego pliku: „jquery.redirect.js”

$("#btn_id").click(function(){
    $.redirect(http://localhost/test/test1.php,
        {
            user_name: "khan",
            city : "Meerut",
            country : "country"
        });
    });
});

zobacz https://github.com/mgalante/jquery.redirect

Mohd Tauovir Khan
źródło
9

Jak zostało powiedziane w innych odpowiedziach, nie ma możliwości wysłania żądania POST za pomocą window.location.href, aby to zrobić, możesz utworzyć formularz i przesłać go natychmiast.

Możesz użyć tej funkcji:

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

https://stackoverflow.com/a/133997/2965158

Strumień wody
źródło
8

Krótka odpowiedź: nie. window.location.hrefnie może przekazywać danych POST.

Nieco bardziej satysfakcjonująca odpowiedź: możesz użyć tej funkcji, aby sklonować wszystkie dane formularza i przesłać je.

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}
  • Zrób submitMe.importFields(form_element);dla każdego z trzech formularzy, które chcesz przesłać.
  • Ta funkcja doda nazwę każdego formularza do nazw jego podrzędnych danych wejściowych (jeśli masz <input name="email">in <form name="login">, przesłana nazwa będzie login_name.
  • Możesz zmienić nameJoinerzmienną na inną niż, _aby nie kolidowała ze schematem nazewnictwa wejściowego.
  • Po zaimportowaniu wszystkich niezbędnych formularzy zrób submitMe.submit();
joequincy
źródło
4

to takie proste

$.post({url: "som_page.php", 
    data: { data1: value1, data2: value2 }
    ).done(function( data ) { 
        $( "body" ).html(data);
    });
});

Musiałem to rozwiązać, aby zablokować ekran mojej aplikacji, w której musiałem przekazać poufne dane jako użytkownik i adres URL, pod którym pracował. Następnie utwórz funkcję, która wykonuje ten kod

Sergio Roldan
źródło
1
Lub w zestawie done()funkcjiwindow.location.href
Chris Edwards,
Tak, @ChrisEdwards, w moim przykładzie próbuję użyć tych zwracanych danych z postu jquery. Mam nadzieję, że komuś się przyda.
Sergio Roldan
3

Czy zastanawiałeś się po prostu nad użyciem magazynu lokalnego / sesji? -lub- W zależności od złożoności tego, co budujesz; możesz nawet użyć indexDB.

uwaga :

Local storagei indexDBnie są bezpieczne - więc chcesz uniknąć przechowywania jakichkolwiek wrażliwych / osobistych danych (tj. nazwisk, adresów, adresów e-mail, daty urodzenia itp.) w żadnym z nich.

Session Storage jest bezpieczniejszą opcją dla czegokolwiek wrażliwego, jest dostępna tylko dla źródła, które ustawia elementy, a także jest usuwane, gdy tylko przeglądarka / karta zostanie zamknięta.

IndexDBjest trochę bardziej [ale niewiele bardziej] skomplikowany i jest 30MB noSQL databasewbudowany w każdą przeglądarkę (ale może być praktycznie nieograniczony, jeśli użytkownik się na to zgodzi) -> następnym razem, gdy będziesz korzystać z dokumentów Google, otwórz DevTools -> aplikacja -> IndexDB i zdobądź szczyt. [ostrzeżenie spoilera: jest zaszyfrowane].

Koncentrując się na Locali Session Storage; oba są bardzo proste w użyciu:

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

Jeśli nie lubisz prostoty - lub - może chcesz zjechać z drogi i spróbować innego podejścia razem -> prawdopodobnie możesz użyć shared web worker... no wiesz, tylko do kopnięć.

Down_with_opp
źródło
-4

Możesz użyć GET zamiast pass, ale nie używaj tej metody dla ważnych wartości,

function passIDto(IDval){    
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}   

W CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>
Kissa Mia
źródło
3
jego metoda GET, ale pytanie brzmi: kumpel metody POST
Thamaraiselvam
@thamaraiselvam Kissa Mia może nie udzieliła dobrze odpowiedzi, ale ma rację co do trasy GET. Pytanie nie jest związane z metodą POST - użytkownik po prostu zapytał, czy istnieje sposób na pobranie danych POST i wysłanie ich za pośrednictwem window.location.href. Powinieneś najpierw wiedzieć, że Window.location.href JEST żądaniem GET. Ta odpowiedź nie jest błędna - po prostu nie będzie łatwo skalować do dużej liczby pól formularza, zakodowanych jako QueryString. Jednak najbardziej oczywistym sposobem wysyłania danych przez adres URL (który można zmienić za pomocą window.location.href) są parametry ciągu zapytania.
SylonZero
@SylonZero Nie możesz dołączyć danych POST do żądania GET. Są to różne rodzaje żądań, a dane w POST wyglądają inaczej. Ważne części specyfikacji HTTP są dość krótkie.
Colin vH,
@ColinvH Musisz uważniej przeczytać to, co napisałem. Wersja TLDR: możesz pobrać dane, które zostaną użyte do wygenerowania POST i zakodować je jako parametry ciągu zapytania.
SylonZero,