Enviar y procesar formulario con Ajax y PHP

  • Por
Utilizamos xajax para enviar por Ajax un formulario, así como enviar y procesarlo con PHP sin tener que actualizar o recargar la página donde estaba el formulario.
Estamos viendo algunos ejemplos de Ajax utilizado junto con PHP para crear aplicaciones web avanzadas, ayudándonos de la clase xajax, que facilita bastante la programación.

Ahora vamos a ver cómo procesar un formulario en una página web sin que se tenga que recargar la página, es decir, enviar al servidor los datos adjuntados por el usuario en el formulario, procesarlos con PHP y luego devolver una salida al usuario dependiendo de los datos introducidos. Todo sin cambiar la página en la que estaba el usuario.

Vimos en un artículo pasado como realizar la página más básica para usar Ajax con PHP de una manera sencilla utilizando xajax. Por ello vamos a dar por entendidos esos puntos. En este caso vamos a explicar las particularidades del envío de formularios con Ajax.

Aprendimos en el artículo pasado a llamar a funciones PHP desde Javascript. Ahora lo que tenemos que hacer es llamar a una función PHP para que procese un formulario. La llamada la seguiremos haciendo mediante Javascript cuando el usuario pulse el botón de enviar. La particularidad de este caso de envío y procesamiento de formularios con Ajax es la manera de enviar y recoger los datos del formulario.

Enviar los datos del formulario a PHP con xajax

Podemos ver aquí el código del formulario:

<div id="mensaje">
<form id="formulario">
Nombre: <input type="text" name="nombre">
<br>
Apellidos: <input type="text" name="apellidos">
<br>
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))">
</form>
</div>

Como vemos, tenemos un par de campos de texto y un botón, que se encargará lanzar el proceso para enviar y procesar los datos. Para ello, el botón tiene un comando para el evento onclick, que trataremos de explicar.

Ahora con xajax vamos a disponer de un método Javascript llamado xajax.getFormValues(ID_FORMULARIO), que recibe el identificador del formulario que se desean obtener los datos. Esta función nos sirve generar los datos del formulario que debemos enviar para su procesamiento. En nuestro caso el formulario tiene el id="formulario", así que lo invocamos:

xajax.getFormValues('formulario')

Los datos del formulario los tenemos que pasar a la función que se encarga de procesarlos, que es una función que hemos escrito con PHP y luego hemos registrado en el objeto xajax. Veremos esa función a continuación.

Recibir los datos del formulario enviado con xajax

Desde PHP estaríamos acostumbrados a recoger los datos de un formulario con $_POST o $_GET, pero ahora lo vamos a tener que hacer de una manera distinta.

Como hemos visto antes, a la función que procesa los el formulario se le envía un parámetro con los datos. Pues ese mismo parámetro es el que tenemos que utilizar para recibir los datos del formulario. Los datos del formulario nos llegan como un array asociativo, por tanto, cuando programemos la función en PHP, el método de trabajo será similar al que utilizaríamos con $_POST y $_GET, que también son arrays asociativos.

function procesar_formulario($form_entrada){
   $salida = "Gracias por enviarnos tus datos. Hemos procesado esto:<p>";
   $salida .= "Nombre: " . $form_entrada["nombre"];
   $salida .= "<br>Apellidos: " . $form_entrada["apellidos"];
   
   //instanciamos el objeto para generar la respuesta con ajax
   $respuesta = new xajaxResponse();
   //escribimos en la capa con id="respuesta" el texto que aparece en $salida
   $respuesta->addAssign("mensaje","innerHTML",$salida);
   
   //tenemos que devolver la instanciación del objeto xajaxResponse
   return $respuesta;
}

La función que procesa el formulario se llama procesar_formulario() y recibe un parámetro que es el array asociativo con los datos del formulario. Esa función compone una salida y luego la devuelve con Ajax.

Para ello crea un objeto de la clase xajaxResponse y con el método addAssign("mensaje","innerHTML",$salida) consigue que en la capa con id="mensaje" se muestre la salida del procesamiento del formulario.

No hay que olvidarse de registrar la función en el objeto xajax

//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("procesar_formulario");

Pero todas estas generalidades y códigos adicionales necesarios para utilizar xajax los hemos visto en el artículo anterior: Xajax: Ajax para PHP.

El código completo de este ejemplo es el siguiente:

Actualizado: Este código está con Xajax 0.2.5. Pero si quieres saber cómo pasarlo a la versión más moderna, tienes que entrar en: Actualiza tu framework a Xajax 0.5.

<?
//incluímos la clase ajax
require ('xajax/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();

function procesar_formulario($form_entrada){
   $salida = "Gracias por enviarnos tus datos. Hemos procesado esto:<p>";
   $salida .= "Nombre: " . $form_entrada["nombre"];
   $salida .= "<br>Apellidos: " . $form_entrada["apellidos"];
   
   //instanciamos el objeto para generar la respuesta con ajax
   $respuesta = new xajaxResponse();
   //escribimos en la capa con id="respuesta" el texto que aparece en $salida
   $respuesta->addAssign("mensaje","innerHTML",$salida);
   
   //tenemos que devolver la instanciación del objeto xajaxResponse
   return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("procesar_formulario");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();
?>
<html>
<head>
   <title>Enviar y procesar un formulario con Ajax y PHP</title>
   <?
   //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   $xajax->printJavascript("xajax/");
   ?>
</head>

<body>
<h1>Recibir y procesar formulario con Ajax y PHP</h1>
<div id="mensaje">
<form id="formulario">
Nombre: <input type="text" name="nombre">
<br>
Apellidos: <input type="text" name="apellidos">
<br>
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))">
</form>
</div>

</body>
</html>

Podemos verlo en funcionamiento en una página aparte.

Si necesitásemos insertar estos datos en una base de datos no variaría mucho el ejemplo. No obstante, lo hemos contado en el artículo: Recibir formulario con Ajax e insertar información en base de datos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Adrian

08/5/2007
El articulo es muy bueno. Creo que en general hacen un trabajo formidable y de mucha ayuda para la comunidad de programadores WEB. La estructura y la busqueda de los articulos es exquisita asi como el detalle y la forma de exponerlos.

Saludos a todos y sigan con este paso

Ronald

16/5/2007
Muy interesante el articulo creo que nos facilita muchas cosas, ahora bien el problema jaja, como seria para enviar los datos a una base de datos mysql?

RESPUESTA

Pues en la función procesar_formulario() tendrías que componer la sentencia SQL para hacer el insert y luego ejecutar el insert.

Hemos agregado unas líneas al artículo para mostrar este caso.

cesar gonzalez

12/9/2007
Me acabo de percatar que el problema es que no especificaron la version del xajax con la que está hecha el ejemplo, el siguiente codigo funka en la version xajax_0.5_beta_4b_Full, es casi igual al de ustedes... lo probe con explorer 7 y la ultima version del mozilla y funciona de maravillas. Ya que descubri el problema voy a seguir leyendo su manual, saludos !!!

<?php
//incluímos la clase ajax
require ('xajax/xajax_core/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();

function procesar_formulario($form_entrada){
$salida = "Gracias por enviarnos tus datos. Hemos procesado esto:<p>";
$salida .= "Nombre: " . $form_entrada["nombre"];
$salida .= "<br>Apellidos: " . $form_entrada["apellidos"];

//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id="respuesta" el texto que aparece en $salida
$respuesta->assign("mensaje","innerHTML",$salida);

//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("procesar_formulario");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();
?>
<html>
<head>
<title>Enviar y procesar un formulario con Ajax y PHP</title>
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("xajax/");
?>
</head>

<body>
<h1>Recibir y procesar formulario con Ajax y PHP</h1>
<div id="mensaje">
<form id="formulario">
Nombre: <input type="text" name="nombre">
<br>
Apellidos: <input type="text" name="apellidos">
<br>
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))">
</form>
</div>

</body>
</html>

Martin

03/2/2009
Alguien me puede ayudar a trabajar con Ajax, tengo un gran problema al enviar un formulario...

Gracias, este es mi correo inf.coita(arroba)hotmail.com

gracias por sus ayuda

walter

25/2/2009
Este ejemplo es perfecto para la que necesito. El comportamiento del boton es justo como necesito que sea para la aplicacion que estoy haciendo, solo una cosa: ademas de lo ya hecho, veo que al apretar la tecla INTRO, el formulario se queda sin hacer nada. ¿Cómo se hace para que al apretar la tecla intro se envie el formulario en forma asincrónica? El comportamiento de la tecla enviar del formulario debe ser tal cual se ve en este articulo. gracias.

anais

15/7/2009
trabajar con clases y funciones en Xajax
Buenas noches, quisiera saber como enviar datos de la función registrada en xajax a una clase, y retornar los valores de esta clase a la función para que esta responda con alert.. u ortra función????

Les agradezco por la ayuda q me puedan dar...

Luis

22/7/2009
problema con algo que no ubico ...
hola estoy comenzando en esto de php, mysql y xajax y me parecio genial este ejemplo para aprender, asi que copie el codigo del ejemplo que esta en el articulo y lo pegue en un archivo en mi editor para analizarlo delpulgarlo y entonces adaptarlo a lo que necesito (hacer una verificacion en una base de datos para no ingresar informacion repetida a una base de datos al hacer onblur en un texto).

el problema es que cuando ejecuto el codigo me sale un "alert" con el siguiente mensaje:

"Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?
URL: xajax/xajax_js/xajax_core.js"

gbd

27/7/2009
getformvalues
muy buens articulos! una pregunta en cuanto a la funcion getformvalues. la funcion tiene q llamarse dentro dl formulario? estoy intentando colocar un boton q pase como parametros getformvalues de un formulario sin estar dentro de el y no m funciona. es que no se puede (porq todos los ejemplos q veo es asi) o tngo otro problema por ahi?

javier

29/8/2009
Error!
hola me aparece este error cuando pruebo el script estoy haciendo algo mal?

script type="text/javascript">
var xajaxRequestUri="http://dynuploads.co.cc/pruebas/";
var xajaxDebug=false;
var xajaxStatusMessages=false;
var xajaxWaitCursor=true;
var xajaxDefinedGet=0;
var xajaxDefinedPost=1;
var xajaxLoaded=false;
function xajax_procesar_formulario(){return xajax.call("procesar_formulario", arguments, 1);}
</script>
<script type="text/javascript" src="xajax/xajax_js/xajax.js"></script>
<script type="text/javascript">
window.setTimeout(function () { if (!xajaxLoaded) { alert('Error: the xajax Javascript file could not be included. Perhaps the URL is incorrect? URL: xajax/xajax_js/xajax.js'); } }, 6000);
</script>

Es solo una pagina de pruebas y como he intentado aprender ajax y es una completa lata quiero dominar bien Xajax!

Gracias de antemano!

por cierto visiten mi web http://www.dynlearning.com.ve

Mandy

03/9/2009
Tu problema
El problema que tienes, es que estás haciendo llamando al método xajax.printJavaScript("xajax/"); y tienes que verificar que lo que este dentro de las comillas, sea el camino correcto donde están los ficheros del xajax, si tienes varias carpetas, por ejemplo xajax/xajax/xajax_core entonces la línea de código te quedaría: xajax.printJavaScript("../../");

El busca a partir de ese camino el fichero js_core...

jhonattan_campo_balczar

11/9/2009
enviar y recibir datos
HOla a todos, quiero que por favor me ayuden, soy renuevo en lo de php y bases de datos, así que quiero recibir una orientación para saber más o menos por dónde buscar.
Necesito que haya un formulario con 2 opciones nombre y numero de identifiación, así cuando el usuario llene los campos se devuelva una información específica para él que está almacenada previamente.Gracias

Luis Rivera

18/9/2009
Como Enviar un archivo con XAJAX 0.5????
Srs. Como hago para enviar un archivo con xajax 0.5, ya que no e visto nada en la web sobre como hacer esto?

pepe verastegui

02/12/2009
no funcoina en mozilla
tengo un problema el envio de formularios no me funciona en mozilla firefox cuando hago el envio se me manda un arreglo con todoss los valores del formulario, pero en mozilla me retorna un arreglo vacio
que podra ser???

joel

24/4/2010
xD
graxias viejo jeje me ayudaste mucho xd, toy aprendiendo iwal a usar xajax

chelocuervo

01/9/2010
xajax incluyendo una clase php
Hola, estoy probando xajax e intente hacer una validación de login de usuario, el codigo de la validacion lo tengo como un metodo en la clase usuario dentro de un archivo php en el que estan definidas todas las clases con los datos de la aplicación.
Hice el formulario con xajax siguiendo el tutorial y funciona bien, pero al incluir tanto con include como con require_once el archivo de las clases deja de funcionar.
Ese archivo lo estoy utilizando en una aplicación sin xajax y funciona todo ok.
Probe tambien incluirlo en alguno de los ejemplos que vienen con el xajax y pasa lo mismo.
Alguien podría darme una pista al respecto?
Desde ya gracias.

Marcelo

chelocuervo

01/9/2010
xajax incluyendo una clase php
agrego, saco el include del archivo con las clases y declaro la clase dentro del archivo que contiene la funcion xajax y todo funciona ok. no se cual es el problema, si alguno sabe agradezco.
Marcelo

Daniela

28/10/2010
URL
Usando la URL completa hasta la carpeta xajax ($xajax->printJavascript("http://localhost/sitio/xajax");) se resolvio mi error

Neftali

12/12/2010
Respuesta
la libreria xajax es una maravilla con respecto alo q decia que cuando incluyen el require_once o include deja de funcionar, pues no te recomedaria usar o incluir otras paginas a menos que sea una de conexion, la debes poner cada include despues de cada funcion dependiendo tu necesidad

saludos

GustavoZ

08/3/2011
problema
Que tal buenas saben? estoy haciendo un sistemas en el cual utilizo JQuery y Xajax... y actualizo un parte de la pagina con Jquery lo q se inserta en un fomulario que despues quiero tratar con xajax pero cuando trato de captar algo del array asociativo pues no sale imprimiendo el tamaño del array dice 0 alguien podra ayudarme por favor

.. de ante mano Gracias

Jaime Carry On

30/4/2011
Hay un pequeño fallo en el código
Ojo, hay un pequeño fallo de versión, en la línea

$xajax->processRequest();

debe poner

$xajax->processRequests();
le falta una s al final de request

Por lo demás, gracias por este fantástico manual que tanto me está sirviendo!

JOOZ

23/12/2011
ayudaaaaaaaaa xajax!!!!!!!!!!!
soy un poco nuevo y estoy aprendiendo pero este codigo no m funciona y no se cual sea el problema.... no me muestra ningun error pero el boton no hace nada...... si me pudieran orientar se los agradeceria.....

<?php
require ('../xajax/xajax_core/xajax.inc.php');
$xajax = new xajax();

function procesa_form($form_entrada){
$salida = "Gracias por enviarnos tus datos. Hemos procesado esto:<p>";
$salida .= "Nombre: " . $form_entrada["nombre"];
$salida .= "<br>Apellidos: " . $form_entrada["apellidos"];

//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id="respuesta" el texto que aparece en $salida
$respuesta->assign("mensaje","innerHTML",$salida);

return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("procesa_form");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();
?>
<html>
<head>
<title>Enviar y procesar un formulario con Ajax y PHP</title>
<?php
$xajax->printJavascript("/xajax");

?>
</head>

<body>
<h1>Recibir y procesar formulario con Ajax y PHP</h1>
<div id="mensaje">
<form id="formulario">
Nombre: <input type="text" name="nombre">
<br>
Apellidos: <input type="text" name="apellidos">
<br>
<input type="button" value="Enviar" onclick="xajax_procesa_form(xajax.getFormValues('formulario'))">
</form>
</div>

</body>
</html>

emmanuel

07/3/2012
hola
hola es interesante este articulo mi pregunta es si pedo llamar 2 funciones desde un mismo evento onclick gracias

Silverhook

29/4/2012
Ayuda por favor!!!!!!
Hola, soy nuevo usando xajax y la verdad es que probé este codigo en NetBeans 7.1 y hasta el momento no me muestra nada al presionar el botón "enviar". Por favor si alguien me explicara que sucede se lo agradecería mucho

Este es el código:

<?php
require 'xajax/xajax_core/xajax.inc.php';
$xajax=new xajax();
$xajax->configure('decodeUTF8Input',true);

$xajax->registerFunction("procesar_formulario");
$xajax->processRequest();
function procesar_formulario($form_entrada){
$salida="gracias por enviar tus datos. Hemos procesado esto<p>";
$salida .= "Nombre:".$form_entrada['nombre'];
$salida .= "Apellidos".$form_entrada['apellidos'];
$respuesta=new xajaxResponse('ISO-8859-1');
$respuesta -> assing("mensaje","innerHTML",$salida);
return $respuesta;
}
$xajax->registerFunction("procesar_formulario");
$xajax->processRequest();


?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejemplo de formulario con xajax</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<?
$xajax ->printJavascript("xajax/");
?>
</head>
<body>
<div id="mensaje">
<form id="formulario">
Nombre:<input type="text" name="nombre">
<br>
Apellidos: <input type="text" name="apellidos">
<br>
<input type="button" value="enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('Formulario'))">


</form>


</div>


</body>
</html>

c lopez

16/7/2012
pregunta
como puedo hacer para generar una tabla que contenga texto y con un boton actualizar solo ta tabla para que muestre cada vez un contenido diferente

slaydominics

01/4/2014
¿¿Código Fuente??
Hola!!! si no es mucha molestia, para este tipo de ejemplos, se podría pedir que pongan el código de ejemplo en demo, para descargar y probarlo??

Juan Carlos

30/7/2014
No veo el mensaje de respuesta en pantalla
Hola. Muy bueno el tuto. funciona a la perfeccion. Guardo en la base de datos y funciona todo excepto que no veo el mensaje de salida en pantalla.
El codigo esta idem al de ustedes.
Alguna sugerencia???

Jaime

07/5/2015
Gracias por tu aporte, me has ayudado infinidades
Excelente, te felicito por la claridad del ejemplo, me ha servido enorme

rodrigo

24/6/2016
Felicitacion!
Estimado muchas felicidades eres muy claro en tus post me ayudan bastante muchas gracias.