passare i dati del post con window.location.href


113

Quando si utilizza window.location.href, vorrei passare i dati POST alla nuova pagina che sto aprendo. è possibile utilizzando JavaScript e jQuery?


11
L'impostazione window.location.hrefesegue una richiesta GET per il nuovo URL, non POST.
Chetan S

Risposte:


85

Utilizzando window.location.hrefnon è possibile inviare una richiesta POST.

Quello che devi fare è impostare un formtag con campi di dati in esso, impostare l' actionattributo del modulo sull'URL e l' methodattributo su POST, quindi chiamare il submitmetodo sul formtag.


Ho dati provenienti da 3 moduli diversi e sto cercando di inviare tutti e 3 i moduli alla stessa pagina, quindi ho provato a serializzare i moduli con jQuery e inviarli in qualche altro modo
Brian

@Brian: Non puoi semplicemente mettere tutto in uno form, quindi tutto viene inviato insieme automaticamente?
Marcel Korpel

Un modulo è in una finestra di dialogo jQueryUI, quindi non posso semplicemente includerli tutti.
Brian

12
Estrai tutti i loro valori, crea dinamicamente un modulo con tutti i campi in tutti e tre i moduli e invia quel modulo. Il modulo può essere invisibile. Non utilizzare un metodo JQuery AJAX, usa $("#myForm").submit(). Il modulo, che sarà invisibile e utilizzato solo per inviare valori dal codice lato client, non l'input dell'utente, non verrà mai mostrato né utilizzato in altro modo e la pagina verrà aggiornata.
Matt Luongo

79

Aggiungi un modulo al tuo HTML, qualcosa del genere:

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

e usa JQuery per riempire questi valori (ovviamente puoi anche usare javascript per fare qualcosa di simile)

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

Quindi inviare finalmente il modulo

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

lato server dovresti essere in grado di ottenere i dati che hai inviato controllando var1e var2, come farlo dipende dalla lingua lato server che stai usando.


quando lo faccio, faccio in modo che il mio browser reindirizzi a dominio / undefined. Che cosa sto facendo di sbagliato?
vigamage


9

Come è stato detto in altre risposte non c'è modo di fare una richiesta POST utilizzando window.location.href, per farlo puoi creare un form ed inviarlo immediatamente.

Puoi usare questa funzione:

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


8

Risposta breve: no. window.location.hrefnon è in grado di trasmettere dati POST.

Risposta un po 'più soddisfacente: puoi usare questa funzione per clonare tutti i dati del tuo modulo e inviarlo.

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);
            }
        }
    }
}
  • Esegui submitMe.importFields(form_element);per ciascuno dei tre moduli che desideri inviare.
  • Questa funzione aggiungerà il nome di ogni modulo ai nomi dei suoi input figli (se hai un <input name="email">in <form name="login">, il nome inviato sarà login_name.
  • È possibile modificare la nameJoinervariabile in qualcosa di diverso da in _modo che non sia in conflitto con lo schema di denominazione dell'input.
  • Dopo aver importato tutti i moduli necessari, fallo submitMe.submit();

4

è così semplice

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

Ho dovuto risolvere questo problema per creare un blocco dello schermo della mia applicazione in cui dovevo passare i dati sensibili come utente e l'URL su cui stava lavorando. Quindi creare una funzione che esegua questo codice


1
O nella done()funzione impostatawindow.location.href
Chris Edwards

Sì @ ChrisEdwards, nel mio esempio cerco di utilizzare i dati di ritorno dal post jquery. Spero che possa essere utile a qualcuno.
Sergio Roldan

3

Hai considerato semplicemente l'utilizzo di Local / Session Storage? -oppure- A seconda della complessità di ciò che stai costruendo; potresti anche usare indexDB.

nota :

Local storagee indexDBnon sono sicuri, quindi si desidera evitare di memorizzare dati sensibili / personali (ad esempio nomi, indirizzi, indirizzi e-mail, data di nascita, ecc.) in uno di questi.

Session Storage è un'opzione più sicura per qualsiasi cosa sensibile, è accessibile solo all'origine che ha impostato gli elementi e si cancella anche non appena il browser / scheda viene chiuso.

IndexDBè un po 'più [ma non molto più] complicato ed è 30MB noSQL databaseintegrato in tutti i browser (ma può essere praticamente illimitato se l'utente sceglie) -> la prossima volta che utilizzi Google Docs, apri DevTools -> applicazione -> IndexDB e dai un'occhiata. [avviso spoiler: è crittografato].

Concentrandosi su Locale Session Storage; questi sono entrambi estremamente semplici da usare:

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

Se la semplicità non fa per te -o- forse vuoi andare fuori strada e provare un approccio diverso tutti insieme -> probabilmente puoi usare un shared web worker... sai, solo per i calci.


-4

Puoi usare GET invece di pass, ma non usare questo metodo per valori importanti,

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

Nel CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>

3
il suo metodo GET ma la domanda è l'amico del metodo POST
Thamaraiselvam

@thamaraiselvam Kissa Mia potrebbe non aver espresso bene la risposta, ma ha ragione riguardo al percorso GET qui. La domanda non è cablata per utilizzare il metodo POST: l'utente ha appena chiesto se esisteva un modo per prendere i dati POST e inviarli tramite window.location.href. E dovresti prima sapere che Window.location.href È una richiesta GET. Questa risposta non è sbagliata: semplicemente non sarà facile scalare a un numero elevato di campi modulo, codificati come QueryString. Tuttavia, il modo più ovvio per inviare dati tramite un URL (che è ciò che puoi modificare con window.location.href) è tramite i parametri della stringa di query.
SylonZero

@SylonZero Non puoi allegare dati POST a una richiesta GET. Sono diversi tipi di richieste e i dati hanno un aspetto diverso in un POST. Le parti importanti delle specifiche HTTP sono piuttosto brevi.
Colin vH

@ColinvH Hai bisogno di leggere quello che ho scritto con più attenzione. Versione TLDR: puoi prendere i dati che verrebbero utilizzati per generare un POST e codificarli come parametri della stringa di query.
SylonZero
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.