• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Portada Boludo
ING English
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en BolUDO

 

Pasando datos al servidor por el método POST.

Tweet
 

domingo julio 10, 2016

7 - Pasando datos al servidor por el método POST.


Podemos enviar los datos por el método GET, como hemos visto hasta ahora, pero también podemos enviar los datos por el método POST.

El método POST se utiliza cuando hay que enviar mucha información al servidor.

Hay varios puntos a tener en cuenta para cuando codificamos los datos para el envío por el método POST:

  1. Cuando llamamos al método open del objeto XMLHttpRequest como primer parámetro indicamos el string 'POST'
      conexion1.open('POST','pagina1.php', true);
      
  2. Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
      conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
  3. Llamamos al método send del objeto XMLHttpRequest pasando los datos:

    conexion1.send("nombre=juan&clave=z80");
    
    Podemos concatenar datos recuperados de un formulario y enviarlos a través del método send.

Confeccionaremos un problema completo para probar la funcionalidad del envío de datos por el método POST.

Haremos una serie de páginas que nos permitan enviar los datos cargados en un formulario al servidor en forma asincrónica y por lo tanto no tendremos que refrescar la página luego de enviado los datos. El formulario solicitará que ingrese el nombre y comentarios del sitio.

El archivo HTML es el siguiente (pagina1.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
</head>

<body>
  <form action="pagina1.php" method="post" id="formulario">
    Nombre:<input type="text" name="nombre" id="nombre" size="20"><br>
    Comentarios:<br>
    <textarea name="comentarios" id="comentarios" rows="10" cols="50"></textarea><br>
    <input type="submit" value="Enviar" id="enviar">
    <div id="resultados"></div>
    <a href="comentarios.txt">Ver resultados</a>
  </form>
</body>
</html>

Este archivo HTML no tiene nada de especial, básicamente es un formulario con un control de tipo input, otro de tipo textarea y finalmente un botón para el envío de los datos al servidor. Además contiene un div vacío para mostrar mensajes sobre el resultado del envío de los datos al servidor.

Disponemos un hipervínculo al archivo de texto que almacenará los datos cargados, esto con el objetivo de poder controlar si los datos realmente se cargaron en el servidor. En un problema más grande seguramente los datos los almacenaremos en una base de datos.

El archivo funciones.js es:

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ref=document.getElementById('formulario');
  ref.addEventListener('submit',enviarDatos,false);
}

function enviarDatos(e)
{
  e.preventDefault();
  enviarFormulario();
}


function retornarDatos()
{
  var cad='';
  var nom=document.getElementById('nombre').value;
  var com=document.getElementById('comentarios').value;
  cad='nombre='+encodeURIComponent(nom)+'&comentarios='+encodeURIComponent(com);
  return cad;
}

var conexion1;
function enviarFormulario() 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','pagina1.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  conexion1.send(retornarDatos());  
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = 'Gracias.';
  } 
  else 
  {
    resultados.innerHTML = 'Procesando...';
  }
}

Lo primero que hacemos en la función inicializarEventos es:

  var ref=document.getElementById('formulario');
  ref.addEventListener('submit',enviarDatos,false);

Obtener la referencia del formulario e inicializar el evento submit para poder capturar el momento en que los datos se enviarán al servidor. Es decir la función enviarDatos se ejecutará cuando el operador presione el botón de tipo submit.

La función enviarFormulario:

function enviarFormulario() 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','pagina1.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  conexion1.send(retornarDatos());  
}

Inicializa el objeto XMLHttpRequest indicando en el método open que los datos se enviarán mediante el comando POST.

Luego llamamos al método setRequestHeader indicando el tipo de contenido a enviar al servidor.

Finalmente llamamos al método send con los datos. Estos datos los recuperamos del formulario llamando a la función retornarDatos() que a continuación la explicaremos.

function retornarDatos()
{
  var cad='';
  var nom=document.getElementById('nombre').value;
  var com=document.getElementById('comentarios').value;
  cad='nombre='+encodeURIComponent(nom)+'&comentarios='+encodeURIComponent(com);
  return cad;
}

Obtenemos el valor contenido en cada control (input y textarea) y luego concatenamos nombre del dato y valor separándolos por el caracter ámpersand.

Otra cosa importante es llamar a la función JavaScript encodeURIComponent para codificar los datos ingresados por el visitante y se puedan enviar correctamente al servidor.

La función procesarEventos:

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = 'Gracias.';
  } 
  else 
  {
    resultados.innerHTML = 'Procesando...';
  }
}

Dijimos ya que esta función se ejecuta cada vez que cambia el estado del objeto XMLHttpRequest. Cuando retorna un 4 significa que el envío de datos se efectuó en forma correcta, mostramos en ese momento el mensaje 'Gracias'.

El último archivo: pagina1.php

<?php
header('Content-Type: text/html; charset=utf-8');
$ar=fopen("comentarios.txt","a") or
  die("No se pudo abrir el archivo");
fputs($ar,"Nombre:".$_REQUEST['nombre']."\n");
fputs($ar,"Comentarios:".$_REQUEST['comentarios']."\n\n");
fclose($ar);
?>

Simplemente rescatamos los datos enviados desde el navegador y procedemos a grabarlos en el archivo de texto.



Problema resuelto.


Enviar los datos cargados en un formulario al servidor en forma asincrónica.
El formulario debe solicitar el ingreso del nombre y comentarios del sitio.


pagina1.html



Ejecutar ejemplo



funciones.js




pagina1.php


Retornar

— @bolUDOoficial

— Síguenos en Twitter@bolUDOoficial

Categorías: #Ajax, #


[0] Atrás | Directorio
« Inicio
Apps Infoudo
Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn

También te puede interesar:

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)
Pizarra interactiva multiusuario
De JSON a PHP (utilizando la función json_decode)
De JSON a JavaScript (utilizando utilizando la función parse)
De JavaScript a JSON (utilizando la función stringify del objeto JSON)
De PHP a JSON (utilizando la función json_encode)
Recuperar datos del servidor en formato JSON
Qué es JSON?
Encuenta con AJAX
Autocompletar un control de tipo text


« Pasando datos al servidor por el método GET.  |  Recuperando datos mediante la propiedad responseText del objeto XMLHttpRequest »
 
Apps Infoudo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Boludo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/@boludo.oficial
Síguenos en Facebook facebook.com/SergioAlemanFans Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @sergioalemanfans
Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1 Síguenos en Tiktok @sergioalemanoficial Síguenos en Tiktok @sergioalemanfans
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/@sergioaleman
Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/@infoudooficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Otras

Móvil: (0426 683 6955 - 0412 8226575) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2023 Boludo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR