Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario

Cómo mandar información, datos o parámetros con el método POST y sin formulario

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

21 thoughts on “Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario”

  1. 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?

  2. una pregunta … y si quiero q en vez de usar un link, se envíe el formulario escondido automaticamente cuando cargue la pagina?

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

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

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

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

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

  8. 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«;

    ?>

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

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

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

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

  13. Queria saber si me pueden ayudar con esto. Tengo un formulario y tiene el siguiente codigo php

    Como hago para que cuando apreto el boton de ENVIAR, me lo envie a mi mail.?????

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *