Post-Daten mit window.location.href übergeben

113

Bei Verwendung von window.location.href möchte ich POST-Daten an die neue Seite übergeben, die ich öffne. Ist dies mit JavaScript und jQuery möglich?

Brian
quelle
10
Bei der Einstellung window.location.hrefwird eine GET-Anforderung für die neue URL und nicht für POST ausgeführt.
Chetan S

Antworten:

84

Mit ist window.location.hrefes nicht möglich, eine POST-Anfrage zu senden.

Sie müssen lediglich ein formTag mit Datenfeldern einrichten, das actionAttribut des Formulars auf die URL und das methodAttribut auf POST setzen und dann die submitMethode für das formTag aufrufen .

Guffa
quelle
Ich habe Daten aus 3 verschiedenen Formularen und versuche, alle 3 Formulare auf dieselbe Seite zu senden. Daher habe ich versucht, die Formulare mit jQuery zu serialisieren und auf eine andere Weise zu senden
Brian
@Brian: Kannst du nicht einfach alles in einem zusammenfassen form, damit alles automatisch zusammen gesendet wird?
Marcel Korpel
Ein Formular befindet sich in einem jQueryUI-Dialogfeld. Daher kann ich nicht alle einschließen.
Brian
12
Ziehen Sie alle Werte heraus, erstellen Sie dynamisch ein Formular mit allen Feldern in allen drei Formularen und senden Sie dieses Formular. Das Formular kann unsichtbar sein. Verwenden Sie keine JQuery AJAX-Methode $("#myForm").submit(). Das Formular, das unsichtbar ist und nur zum Senden von Werten aus Ihrem clientseitigen Code und nicht von Benutzereingaben verwendet wird, wird niemals angezeigt oder anderweitig verwendet, und die Seite wird aktualisiert.
Matt Luongo
78

Fügen Sie Ihrem HTML-Code ein Formular hinzu:

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

und verwenden Sie JQuery, um diese Werte zu füllen (natürlich können Sie auch Javascript verwenden, um etwas Ähnliches zu tun)

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

Dann senden Sie endlich das Formular

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

auf der Serverseite sollten Sie in der Lage sein , die Daten , die Sie geschickt zu erhalten , indem überprüft var1und var2, wie dies auf tun , hängt was serverseitige Sprache Sie verwenden.

Mohamed Khamis
quelle
Wenn ich das mache, lasse ich meinen Browser zu domain / undefined umleiten. Was mache ich falsch?
Vigamage
9

Verwenden Sie diese Datei: "jquery.redirect.js"

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

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

Mohd Tauovir Khan
quelle
8

Kurze Antwort: nein. window.location.hrefkann keine POST-Daten übergeben.

Etwas zufriedenstellendere Antwort: Mit dieser Funktion können Sie alle Ihre Formulardaten klonen und senden.

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);
            }
        }
    }
}
  • Tun Sie dies submitMe.importFields(form_element);für jedes der drei Formulare, die Sie einreichen möchten.
  • Diese Funktion fügt den Namen jedes Formulars zu den Namen seiner untergeordneten Eingaben hinzu (Wenn Sie ein <input name="email">In haben <form name="login">, lautet der übermittelte Name login_name.
  • Sie können die nameJoinerVariable in eine andere Variable ändern, _damit sie nicht mit Ihrem Eingabe-Benennungsschema in Konflikt steht.
  • Sobald Sie alle erforderlichen Formulare importiert haben, tun Sie dies submitMe.submit();
Joequincy
quelle
8

Wie bereits in anderen Antworten erwähnt, gibt es keine Möglichkeit, eine POST-Anfrage mit window.location.href zu stellen. Dazu können Sie ein Formular erstellen und es sofort senden.

Sie können diese Funktion verwenden:

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

Aquajet
quelle
4

es ist so einfach

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

Ich musste dieses Problem lösen, um eine Bildschirmsperre für meine Anwendung zu erstellen, bei der ich vertrauliche Daten als Benutzer und die URL, unter der er arbeitete, übergeben musste. Erstellen Sie dann eine Funktion, die diesen Code ausführt

Sergio Roldan
quelle
1
Oder im done()Funktionssatzwindow.location.href
Chris Edwards
Ja @ChrisEdwards, in meinem Beispiel versuche ich, die Rückgabedaten von jquery post zu verwenden. Ich hoffe, dass es jemandem nützlich wäre.
Sergio Roldan
3

Haben Sie darüber nachgedacht, einfach Local / Session Storage zu verwenden? -oder- Abhängig von der Komplexität Ihres Gebäudes; Sie könnten sogar indexDB verwenden.

Hinweis :

Local storageund indexDBsind nicht sicher - daher möchten Sie vermeiden, dass vertrauliche / persönliche Daten (z. B. Namen, Adressen, E-Mail-Adressen, Geburtsdaten usw.) in diesen beiden Daten gespeichert werden.

Session Storage ist eine sicherere Option für alle sensiblen Elemente. Sie ist nur für den Ursprung zugänglich, der die Elemente festgelegt hat, und wird auch gelöscht, sobald der Browser / die Registerkarte geschlossen wird.

IndexDBist etwas komplizierter [aber nicht viel komplizierter] und 30MB noSQL databasein jeden Browser integriert (kann aber grundsätzlich unbegrenzt sein, wenn sich der Benutzer anmeldet) -> Wenn Sie das nächste Mal Google Docs verwenden, öffnen Sie DevTools -> Anwendung -> IndexDB und einen Höhepunkt nehmen. [Spoiler-Alarm: Es ist verschlüsselt].

Konzentration auf Localund Session Storage; diese sind beide kinderleicht zu bedienen:

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

Wenn einfach nicht dein Ding ist - oder -, möchtest du vielleicht von der Straße abkommen und gemeinsam einen anderen Ansatz ausprobieren -> kannst du wahrscheinlich ein shared web worker... weißt du, nur für Tritte verwenden.

Down_with_opp
quelle
-4

Sie können GET anstelle von pass verwenden, diese Methode jedoch nicht für wichtige Werte verwenden.

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

In der CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>
Kissa Mia
quelle
3
seine GET-Methode, aber Frage ist POST-Methode Kumpel
Thamaraiselvam
@thamaraiselvam Kissa Mia hat die Antwort möglicherweise nicht gut formuliert, hat aber Recht mit der GET-Route hier. Die Frage ist nicht fest mit der POST-Methode verbunden - der Benutzer hat nur gefragt, ob es eine Möglichkeit gibt, POST-Daten zu nehmen und über window.location.href zu senden. Und sollten Sie zunächst wissen , dass window.location.href IS eine GET - Anfrage. Diese Antwort ist nicht falsch - es ist einfach nicht einfach, auf eine große Anzahl von Formularfeldern zu skalieren, die als QueryString codiert sind. Die naheliegendste Methode zum Senden von Daten über eine URL (die Sie mit window.location.href ändern können) sind jedoch Abfragezeichenfolgenparameter.
SylonZero
@SylonZero Sie können keine POST-Daten an eine GET-Anforderung anhängen. Es handelt sich um verschiedene Arten von Anforderungen, und die Daten in einem POST sehen unterschiedlich aus. Die wichtigen Teile der HTTP-Spezifikation sind ziemlich kurz.
Colin vH
@ColinvH Du musst das, was ich geschrieben habe, genauer lesen. TLDR-Version: Sie können die Daten, die zum Generieren eines POST verwendet werden, als Abfragezeichenfolgenparameter codieren.
SylonZero