DesarrolloWeb.com > Manuales > Trabajo con Ajax en PHP utilizando Xajax

Recibir formulario con Ajax e insertar información en base de datos

18 de mayo de 2007

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (15)

Artículo en el que se realiza un envío de formulario con Ajax y PHP y se inserta la información en una base de datos MySQL.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

En este artículo vamos a resolver la duda de un usuario, que quería insertar en una base de datos la información recibida de un formulario con Ajax. En realidad es un tema que no revierte ninguna complicación, si ya conocemos el modo de trabajo de PHP con bases de datos, pues no varía nada que estemos realiando las acciones a través de Ajax. Pero bueno, puede ser de utilidad explicarlo.

La duda surgió a partir del artículo Enviar y procesar formulario con Ajax y PHP, por lo que será necesario leer el artículo anterior para entender bien las generalidades del envío de formularios con Ajax.

Nota: En esta serie de artículos estamos utilizando la librería xajax, que sirve para trabajar con Ajax en PHP de una manera muy simplificada. Las generalidades del uso de xajax las comentamos en el artículo xajax: Ajax y PHP.

Si quisiéramos, podríamos insertar la información recibida por el formulario en una base de datos. Esto sólo implicaría un pequeño cambio en la función procesar_formulario() (ver artículo anterior), para que realice el insert. En lugar de mostrar los datos por pantalla como hace en el ejemplo anterior, tendría que generar una sentencia SQL con el insert y ejecutarla.

Tendríamos también que realizar una conexión con la base de datos donde queremos hacer el insert. Esta conexión podríamos hacerla dentro de la misma función o fuera. En este pequeño código de la función procesar_formulario() se muestra como podría ser el proceso de inserción de la información en una base de datos MySQL:

Pero la sentencia de conexión con la base de datos podría estar en otro lugar del código de la página. En un supuesto que nuestra página realice accesos a base de datos en diversos lugares del código, nos convendría realizar una conexión a la base de datos de manera global, que podamos utilizar desde cualquier parte del código.

A continuación se muestra el ejemplo completo, de enviar datos de un formulario por Ajax e insertar el contenido en una base de datos MySQL. En este caso hemos hecho una variación en el código para que la conexión a la base de datos se realice como variable global a la página y no local a la función, así podríamos utilizar esa misma conexión en otros lugares del código PHP de la página.

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

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

$connectid = mysql_connect("localhost", "root", "");
mysql_select_db("guiarte_backup",$connectid);

function procesar_formulario($form_entrada){
   $ssql = "insert into pais (nombre_pais) values ('" . $form_entrada["nombre"] . "')";

   if (mysql_query($ssql)){
      $salida = "Insertado correctamente";
   }else{
      $salida = "No se ha insertado. Este es el error: " . mysql_error();
   }

   //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->processRequests();
?>
<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 de país: <input type="text" name="nombre">
<br>
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))">
</form>
</div>

</body>
</html>

Enviar un comentario a este artículo

Ver comentarios del artículo (15)

Compartir en redes sociales

Comparte este manual en tus redes sociales

MANUAL: Trabajo con Ajax en PHP utilizando Xajax

Enviar y procesar formulario con Ajax y PHP

Procesar formulario con Ajax y PHP con validación

Comentarios

Enviar un comentario al artículo

Fueron enviados 15 comentarios al artículo

9 comentarios no revisados

6 comentarios revisados:

Por: eduardo

06/9/2007

me gusto la idea de ocupar ajax en el ingreso de datos, intente de hacerlo pero tengo este error

Fatal error: Call to undefined method xajax::processRequests() in /var/www/SitioCarrera2/registrar.php on line 29

SI SABES SOLUCIONARLO POR FAVOR AYUDAR
GRACIAS

Por: cesar gonzalez

13/9/2007

Eduardo, en vez de "requests" prueba con "request" (sin la "s" final) saludos !!!

jrlexx

como subir foto a directorio con xajax ?

02/3/2010

Me funciona perfecto este ejemplo, quisiera agregarle que se pueda subir una foto mediante el formulario a un directorio en el servidor y guardar la ruta en la base de datos, ya lo tengo con PHP, Pero al integrarlo con xajax no me funciona.

Como podria?

vasqueza...

PEQUEÑO ERROR EN LA CONEX CREO... AYUDA

24/5/2010

xajax debug output
Sun May 23 22:23:21 EST 2010
DONE [1102ms]Sun May 23 22:23:21 EST 2010
ERROR: No response processor is available to process the response from the server.Content-Type: text/html.Check for error messages from the server.Sun May 23 22:23:21 EST 2010
RECEIVED [status: 200, size: 144 bytes, time: 1052ms]:<br /><b>Fatal error</b>: Call to a member function query() on a non-object in <b>C:wampwwwxajax egistrar.php</b> on line <b>11</b><br />Sun May 23 22:23:20 EST 2010
SENT [505 bytes]Sun May 23 22:23:20 EST 2010
SENDING REQUESTSun May 23 22:23:20 EST 2010
CALLING: xjxfun: procesar_formularioURI: http://localhost/xajax/registrar.phpSun May 23 22:23:19 EST 2010
POST: xjxfun=procesar_formulario&xjxr=1274671399902&xjxargs[]=<xjxobj><e><k>nombre</k><v>Sdv</v></e><e><k>apellido</k><v>Sdv</v></e><e><k>pass</k><v>Sdv</v></e><e><k>direccion</k><v>Sdv</v></e><e><k>telefono</k><v>Sdv</v></e><e><k>email</k><v>Sdv</v></e><e><k>sexo</k><v>Sdv</v></e></xjxobj>Sun May 23 22:23:19 EST 2010
PREPARING REQUESTSun May 23 22:23:19 EST 2010
OBJECT TO XML: size = 7Sun May 23 22:23:19 EST 2010
OBJECT TO XML: maxDepth = 20, maxSize = 2000Sun May 23 22:23:19 EST 2010
PROCESSING PARAMETERS [1]Sun May 23 22:23:19 EST 2010
INITIALIZING REQUESTSun May 23 22:23:19 EST 2010
STARTING XAJAX REQUEST

<?php
//archivo ajax04.php
require('xajax_core/xajax.inc.php');
require('conexion.php');
$xajax=new xajax();
$xajax->configure('debug',true);
$xajax->configure('javascript URI','./');
function procesar_formulario($form_entrada)
{
$sql=("insert into persona (nombre,apellido,pass,direccion,telefono,email,sexo) values ('$form_entrada[nombre]','$form_entrada[apellido]' '$form_entrada[pass]','$form_entrada[direccion]','$form_entrada[telefono]','$form_entrada[email]','$form_entrada[sexo]')");
$cnx->query($sql) or die ($sql);
if (query($sql)){
$salida= "Guardo correctamente";
}else{
$salida = "No se ha insertado. Este es el error: ";
}
$obj=new xajaxResponse();
//assign > coge el valor $saludo y lo asigna a una propiedad de un objeto.
$obj->assign("mensaje","innerHTML",$salida);
return $obj;
}
$xajax->registerFunction("procesar_formulario");
$xajax->processRequest();
echo '<?xml version="1.0" encoding="UTF"-8?>';
?>
<html>
<head><?php $xajax->printJavascript();?>
<script>
function ver()
{
xajax_procesar_formulario(xajax.getFormValues("formulario"));
}
</script>
</head>
<body>
<h1>Recibir y procesar formulario con Ajax y PHP</h1>
<div id="mensaje">
<form id="formulario">
<p>nombre:
<input type="text" name="nombre">
</p>
<p>apellido:
<input type="text" name="apellido">
</p>
<p>pass:
<input type="text" name="pass">
</p>
<p>
direccion:
<input type="text" name="direccion">
</p>
<p>telefono:
<input type="text" name="telefono">
</p>
<p>email:
<input type="text" name="email">
</p>
<p>

sexo:
<input type="text" name="sexo">
</p>
<p>

<input type="button" value="Guardar" onClick="ver()">

</p>
</form>
</div>
</body>
</html>

Grax de antenamo por la ayuda amigos

PiLMee

INSERTAR REGISTRO CON XAJAX 0.5 CORREGIDO

11/7/2010

HOLA A TODOS AMIGOS DE DESARROLLO WEB, BUSCABA POR INTERNET COMO INSERTAR REGISTRO CON XAJAX Y ENTONCRE ESTE SCRIPT A V 0.2 ENTONCES ME PUSE A ACTUALIZARLO A LA VERSION 0.5 Y AHORA COMPARTO EL CODIGO.
ESPERO SEA DE SU UTILIDAD.

ATTE: PILMEE GATES

<?
//incluímos la clase ajax
require ('xajax/xajax_core/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$connectid = mysql_connect("localhost", "root", "mym");
mysql_select_db("pruebas",$connectid);
function procesar_formulario($form_entrada){
$ssql = "insert into prueba (nombre) values ('" . $form_entrada["nombre"] . "')";
if (mysql_query($ssql)){
$salida = "Insertado correctamente";
}else{
$salida = "No se ha insertado. Este es el error: " . mysql_error();
}
//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->register(XAJAX_FUNCTION,"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 de país: <input type="text" name="nombre">
<br>
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))">
</form>
</div>
</body>
</html>