Desarrollo web
Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario
Enviar a un amigo
⋅ 
Imprimir este artículo
⋅ 
Escribir un comentario
Tal vez haya necesitado en alguna ocasión enviar datos de una página a otra y se ha visto forzado a enviarlos de manera visible en la URL en forma de querystring. Como sabrá la forma de enviar información de manera no visible en la URL es utilizar el método POST pero para ello es necesario recurrir a un formulario. En el siguiente artículo veremos una técnica que nos permite enviar datos por POST sin necesidad de trabajar con un formulario, o al menos, sin la necesidad de manejar un formulario de manera directa.
El Método POST
La especificación de HTML sitúa la diferencia entre los métodos GET y POST en la forma en la que los datos son enviados: En el caso de GET los datos son incluídos en la URL, mientras que cuando se utiliza el método Post los datos de un formulario se envían a la página destino inmersos dentro del cuerpo de la petición HTTP.
Además la especificación recomienza utilizar el método GET solamente cuando el procesamiento del formulario es idempotente (El envío de los datos no va a generar un cambio en ningún elemento del sistema salvo en el monitor del usuario), y utilizar el método POST para el resto de casos. Un ejemplo de formulario idempotente podría ser el de una búsqueda, ya que tan sólo genera una página de resultados y no implica ningún cambio de estado en BBDD.
Sin embargo hay casos en los que estamos obligados a utilizar el método POST:
- Si los datos a enviar contienen carácteres que no pueden codificarse en ASCII.
- Si el tamaño de los datos a enviar es muy grande. Puede encontrar un documento de Microsoft que habla sobre esta limitación INFO: Maximum URL Length Is 2,083 Characters in Internet Explorer (Q208427) .
- En el caso de que no queramos hacer visible a los usuarios de manera directa cómo se envían los datos.
Puede encontrar toda la información que necesite sobre los métodos GET y POST en la siguiente página http://www.cs.tut.fi/~jkorpela/forms/methods.html
Un ejemplo práctico
Para exponer de forma clara y sencilla esta técnica he pensado que lo mejor es preparar el siguiente ejemplo.
El código javascript es extremadamente sencillo, en primer lugar accedemos directamente a los servicios del DOM para crear un formulario con un campo de tipo hidden. Existen muchas formas de hacer esto, en este ejemplo hemos optado por utilizar la función createElement para crear los nodos y la función appenchild para añadirlos al árbol del documento:
var form = document.createElement("form"); // crear un form
with(form) {
setAttribute("name", "myform"); //nombre del form
setAttribute("action", ""); // action por defecto
setAttribute("method", "post"); // method POST }
var input = document.createElement("input"); // Crea un elemento input
with(input) {
setAttribute("name", "theInput"); //nombre del input
setAttribute("type", "hidden"); // tipo hidden
setAttribute("value", ""); // valor por defecto
}
form.appendChild(input); // añade el input al formulario
document.getElementsByTagName("body")[0].appendChild(form); // añade el formulario al documento
El paso siguiente y último (no le engañe cuando dije que iba a ser sencillo) es esperar a la carga de la pagina para recorrer el DOM del documento e identificar los links cuyo name sea "post". En este caso recuperaremos el valor del title y se enviará por POST a través del formulario a la página referenciada en el href.
window.onload=function(){
var my_links = document.getElementsByTagName("a");
for (var a = 0; a < my_links.length; a++) {
if (my_links[a].name=="post") my_links[a].onclick = function() {
document.myform.action=this.href;
document.myform.theInput.value=this.title;
document.myform.submit();
return false;}
}}
Aquellos links en los que queramos enviar algún tipo de información por POST deberán incluir los siguientes atributos:
- name="post"
- title="<valor que queremos enviar>"
- href="<url a la que se enviará la información>"
Valga el siguiente código de ejemplo:
<a href="ejemplo_post.php" name="post" title="Este valor se enviará por post" >Pulsa aquí</a> Para hacer POST.
También puedes <a href="ejemplo_post.php" name="post" title="Este valor también se envía por post" >pulsar aquí</a> para hacer otro POST.
Esto es un <a href="ejemplo_post.php">Esto es un link normal</a>.
Artículos relacionados:
- Cómo mejorar los formularios HTML con Xhtml, Css y Javascript
- Ajax zoomy: Un Ajax lightbox para su galería de imágenes
- Tutorial sobre Google Analytics: 1. Información básica, configuración e instalación
- Guía de maquetación web para el desarrollo de un Site corporativo
- Optimizar Los META tags para los buscadores
Si te ha gustado este artículo y te ha sido de utilidad, Haz una Donación y colobora en el mantenimiento de esta blog.
Cada artículo está escrito con esfuerzo y dedicación, ayúdame a seguir ayudándote.
Comentarios
20 comentarios para “Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario”
Escribir un comentario
Atención, todos los artículos de hellogoogle.com están bajo una
licencia de Creative Commons.
Seria posible este envio en Blogger, el codigoen los gadtes o en la plantilla de diseño y donde la pagina de envió habria que crearla a parte no?
Siempre que permita insertar código JS sí es posible hacerlo.
Debo entender JS= JavaScript
una pregunta … y si quiero q en vez de usar un link, se envíe el formulario escondido automaticamente cuando cargue la pagina?
Ignacio gracias por este gran aporte, se javascript pero no muy a fondo y este script me sirvió de mucho, pero queria hacerle una modificación, como podría enviar el formulario usando un botón.
Hola Luis, con un botónes muy sencillo, echa un ojo a esta dirección: http://www.webtaller.com/construccion/lenguajes/html/lecciones/formularios_html.php
Espero que te sirva de ayuda.
Suerte.
Ignacio agradezco tu rápida respuesta, revise el enlace que me diste, y solo encontraba información general sobre los formularios, lo que necesitaba es como modificar el código javascript para poder enviarlo mediante una función.
Ahora el script envía mediante un enlace.
Pulsa aquí
En esta linea se define el objeto que contiene el valor
var my_links = document.getElementsByTagName(“a”);
que en este caso determinado que es un hipervínculo “a”, asumo que eso se debe modificar por input que es el objeto del botón.
Ahora en esta linea
document.myform.theInput.value=this.title;
obtenemos el valor que se le asigna al título del hipervínculo, en mi caso agregue un campo de texto y reemplace esta linea por la siguiente
document.myform.theInput.value=document.getElementById(‘valor’).value
eso me funciona bien si sigo enviando mediante el hipervínculo, pero ya empaquetandolo en una función y llamándola a la misma por el botón pero ahi si ya no me funciona, espero me puedas ayudar en esto.
Saludos
Bueno revisando el script me di cuenta que estaba cometiendo un error al querer meter el código a una función, lo único que se debe hacer es cambiar unas cuantas lineas, para los que deseen enviar mediante un botón dejo el código.
<script type=”text/javascript” language=”javascript”>
var form = document.createElement(“form”); // crear un form
with(form) {
setAttribute(“name”, “myform”); //nombre del form
setAttribute(“action”, “”); // action por defecto
setAttribute(“method”, “post”); // method POST
}
var input = document.createElement(“input”); // Crea un elemento input
with(input) {
setAttribute(“name”, “theInput”); //nombre del input
setAttribute(“type”, “hidden”); // tipo hidden
setAttribute(“value”, “”); // valor por defecto
}
form.appendChild(input); // añade el input al formulario
document.getElementsByTagName(“body”)[0].appendChild(form); // añade el formulario al documento
window.onload=function(){
var my_links = document.getElementsByTagName(“input”);
for (var a = 0; a < my_links.length; a++) {
if (my_links[a].name==”post”) my_links[a].onclick = function() {
document.myform.action=”resultado.php”;
document.myform.theInput.value=document.getElementById(‘valor’).value
document.myform.submit();
return false;}
}
}
</script>
<h3>Enviando información por post</h3>
<p>
<input name=”valor” type=”text” id=”valor”>
</p>
<p>
<input type=”button” name=”post” value=”Botón” onClick=”envia()”>
</p>
pero ojo que esto reacciona a cualquier botón que se introduzca, si quieren cambiar eso deben modificar esta linea
var my_links = document.getElementsByTagName(“input”);
Saludos
jenial pero no se hacer formularios
pojoijmopm
Una consulta, como hago para capturar la informacion con PHP?, lo que hice fue esto:
En resive.php
claro esta antes escribi en index.html:
…
1
…
Quisiera saber en que me estoy equivocando.
no se que pasa, vean el codigo de ese link por fa.
Muchas Gracias¡¡¡
Me ahorraste mucho tiempo, funciona a la perfección
como le puedo hacer, si tengo un programita que es la venta de libros el cual se leccionas libros y te dice la cantidad y el monto a pagar, pero si requiero escoger otro, me apracerca lo que anterior mente habia solicitado y la nueva compra.. podrian apoyarme ya que no encuentro la forma, les envio el ódigo que llevo:
dentro de la pagina de pagos..
Compra Libros
function valida()
{
if(resumen.cantidad.value != “0″ && resumen.total.value != “0″)
{
top.location = “adios.html”
}
else
alert(“Datos Incompletos”)
}
SU PEDIDO
PEDIDO ANTERIOR
Cantidad:
Total:
PEDIDO ACTUAL
Cantidad:
Total:
Excelente aporte.. muchas gracias!
tengo un combobox qeu se debe cargar con un consulta de mi BD, luego el dato obtenido del combo lo debo mandar como parametro a otra pagina php.
aqui tengo un codigo.. por favor ayuda..
require(“dbconnect.inc.php”);
$qry = “SELECT distinct gestion.id, gestion.nombre_gestion FROM contenedor,gestion where gestion.id = contenedor.id_gestion and contenedor.id_tipo_info = 1 “;
$ces = mysql_query($qry);
echo “”;
while($row = mysql_fetch_array($ces)){
echo “”.$row[nombre_gestion].”";
}
echo “”;
$x = $_POST["combito"];
print ” Ver Archivos“;
?>
Muy interesante esta función.
Para un novato como yo sería de mucha utilidad que facilitaras los ficheros fuente del PHP ya que así entendería mejor su funcionamiento.
El JS creo que lo tengo claro pero en PHP aún necesito orientación muy detallada.
Gracias por anticipado.
Hola Ibg, en realidad los ficheros fuente PHP no tienen ningún código reseñable, tan sólo el relacionado con recoger los parámetros enviados por post y procesarlos. La chica de la funcionalidad está en el javascript.
Bueno he aqui mi duda que pasa si en el codigo de window.onload no declaro que es una funcion(window.onload=function(){…codigo …}) es decir que pasa si declaro el codigo de esta manera
window.onload={
var my_links = document.getElementsByTagName(“a”);
for (var a = 0; a < my_links.length; a++) {
if (my_links[a].name=="post") my_links[a].onclick ={
document.myform.action=this.href;
document.myform.theInput.value=this.title;
document.myform.submit();
return false;}
}}
ya lo he probado y parece ser que el codigo hace exactamente lo mismo he igualmente para el evento onclick. Me gustaria que me pudieras explicar cual es la intencion de declarar la funcion en estos eventos.
Espero no pedir demasiado jejejeje.
Bueno me despidoa y por cierto tu codigo en verdad esta muy interesante.
Buenos días,
Por favor ayúdenme, con esto:
Necesito crear un script que envíe parámetros post a una web.
La web es “http://evtde.argonautanet.com/Varios/ComprobacionTelefono.aspx”.
Y los parámetros post que quiero enviar son:
FRAME F=0
TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:aspnetForm ATTR=ID:ctl00_Main_txtTelefono CONTENT=12344556
ONDIALOG POS=1 BUTTON=OK CONTENT=
TAG POS=1 TYPE=INPUT:IMAGE FORM=ID:aspnetForm ATTR=ID:ctl00_Main_BtnComprobar
Saludos