pasar datos de publicación con window.location.href


113

Al usar window.location.href, me gustaría pasar datos POST a la nueva página que estoy abriendo. ¿Es esto posible usando JavaScript y jQuery?


11
La configuración window.location.hrefhace una solicitud GET para la nueva URL, no POST.
Chetan S

Respuestas:


85

El uso window.location.hrefno es posible enviar una solicitud POST.

Lo que tienes que hacer es configurar una formetiqueta con campos de datos, establecer el actionatributo del formulario en la URL y el methodatributo en POST, luego llamar al submitmétodo en la formetiqueta.


Tengo datos que provienen de 3 formularios diferentes y estoy tratando de enviar los 3 formularios a la misma página, así que he intentado serializar los formularios con jQuery y enviarlos de otra manera
Brian

@Brian: ¿No puedes poner todo en uno formpara que todo se envíe automáticamente?
Marcel Korpel

Un formulario está en un cuadro de diálogo jQueryUI, por lo que no puedo incluirlos todos.
Brian

12
Extraiga todos sus valores, cree dinámicamente un formulario con todos los campos en los tres formularios y envíe ese formulario. La forma puede ser invisible. No use un método JQuery AJAX, use $("#myForm").submit(). El formulario, que será invisible y solo se usará para enviar valores desde el código del lado del cliente, no la entrada del usuario, nunca se mostrará ni se usará de otra manera, y la página se actualizará.
Matt Luongo

79

Agregue un formulario a su HTML, algo como esto:

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

y use JQuery para completar estos valores (por supuesto, también puede usar javascript para hacer algo similar)

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

Entonces finalmente envíe el formulario

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

en el lado del servidor, debería poder obtener los datos que envió comprobando var1y var2, cómo hacerlo, depende del idioma del lado del servidor que esté utilizando.


cuando hago esto, consigo que mi navegador redirija a dominio / indefinido. ¿Qué estoy haciendo mal?
vigamage


9

Como se dijo en otras respuestas, no hay forma de realizar una solicitud POST usando window.location.href, para hacerlo puede crear un formulario y enviarlo de inmediato.

Puede utilizar esta función:

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

Respuesta corta: no. window.location.hrefno es capaz de pasar datos POST.

Respuesta algo más satisfactoria: puede usar esta función para clonar todos los datos de su formulario y enviarlos.

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);
            }
        }
    }
}
  • Hazlo submitMe.importFields(form_element);para cada uno de los tres formularios que quieras enviar.
  • Esta función se añada el nombre de cada forma de los nombres de sus entradas de niño (si usted tiene una <input name="email">en <form name="login">, el nombre será presentado login_name.
  • Puede cambiar la nameJoinervariable a algo diferente _para que no entre en conflicto con su esquema de nomenclatura de entrada.
  • Una vez que haya importado todos los formularios necesarios, haga submitMe.submit();

4

es tan simple como esto

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

Tuve que resolver esto para hacer un bloqueo de pantalla de mi aplicación donde tenía que pasar datos sensibles como usuario y la url donde estaba trabajando. Luego crea una función que ejecute este código


1
O en el done()conjunto de funcioneswindow.location.href
Chris Edwards

Sí @ChrisEdwards, en mi ejemplo trato de usar los datos de retorno de la publicación de jquery. Espero que sea de utilidad para alguien.
Sergio Roldan

3

¿Ha considerado simplemente usar almacenamiento local / de sesión? -o bien- Dependiendo de la complejidad de lo que está creando; incluso podrías usar indexDB.

nota :

Local storagey indexDBno son seguras, por lo que desea evitar almacenar datos confidenciales / personales (es decir, nombres, direcciones, direcciones de correo electrónico, fecha de nacimiento, etc.) en cualquiera de estos.

Session Storage es una opción más segura para cualquier cosa sensible, solo es accesible para el origen que configuró los elementos y también se borra tan pronto como se cierra el navegador / pestaña.

IndexDBes un poco más [pero no mucho más] complicado y está 30MB noSQL databaseintegrado en todos los navegadores (pero puede ser básicamente ilimitado si el usuario acepta) -> la próxima vez que use Google docs, abra DevTools -> aplicación -> IndexDB y echa un vistazo. [alerta de spoiler: está encriptado].

Centrándose en LocalySession Storage ; ambos son muy fáciles de usar:

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

Si lo simple no es lo tuyo -o- tal vez quieras salirte de la carretera y probar un enfoque diferente todos juntos -> probablemente puedas usar un shared web worker... ya sabes, solo por diversión.


-4

Puede usar GET en lugar de pasar, pero no use este método para valores importantes,

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

En CustomerBasket.php

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

3
su método GET pero la pregunta es amigo del método POST
Thamaraiselvam

@thamaraiselvam Puede que Kissa Mia no haya expresado bien la respuesta, pero tiene razón sobre la ruta GET aquí. La pregunta no está programada para usar el método POST; el usuario simplemente preguntó si había una manera de tomar datos POST y enviarlos a través de window.location.href. Y primero debe saber que Window.location.href ES una solicitud GET. Esta respuesta no es incorrecta, simplemente no será fácil escalar a una gran cantidad de campos de formulario, codificados como QueryString. Sin embargo, la forma más obvia de enviar datos a través de una URL (que es lo que puede cambiar con window.location.href) es a través de parámetros de cadena de consulta.
SylonZero

@SylonZero No puede adjuntar datos POST a una solicitud GET. Son diferentes tipos de solicitudes y los datos se ven diferentes en un POST. Las partes importantes de la especificación HTTP son bastante breves.
Colin vH

@ColinvH Debes leer lo que he escrito con más atención. Versión TLDR: puede tomar los datos que se utilizarían para generar un POST y codificarlos como parámetros de cadena de consulta.
SylonZero
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.