Bien en esta segunda entrega del bloque ‘Envío de datos con formulario‘ vamos a ir un pasito más allá. Si en el anterior post solamente enviamos unos datos por formulario y se mostraban en la misma página sin interactuar con nada más, en este lo que vamos a hacer va a ser mandar los datos del formulario, guardarlos en una BBDD, recuperar todos los datos y mostrarlos en la misma página.

Lo primero que debemos de hacer es construir un html con un div id=”comentarios” y un formulario. 

...
<div id="comentarios">
</div>
<div id="enviacomentario">
<form name="tagboard" method="post" onsubmit="cargarContenido(); return false" />
  <label>Tu nick: <input id="nick" type="text" alt="Nick" name="Nick"/></label><br />
  <label>Tu email: <input id="email" type="text" alt="Email" name="Email"/></label><br />
  <label>Tu mensaje: <textarea id="mensaje" name="Mensaje" title="Mensaje" rows="5" wrap="virtual"></textarea></label><br />
  <input id="submit" type="submit" alt="Enviar" name="Enviar"/>
</div>
...

En el div “comentarios” es donde se visualizarán los datos de la BBDD devueltos por el PHP.

Como segundo punto crearemos un archivo Javascript en el que tendremos 2 funciones: cargarContenido(); y mostrarContenido();. El archivo javascript se llamará functions.js
cargarContenido();

function cargarContenido(){
	var comentarios;
	var nick, email, mensaje;

	comentarios = document.getElementById('comentarios');
	nick = document.getElementById('nick').value;
	email = document.getElementById('email').value;
	mensaje = document.getElementById('mensaje').value;
	ajax = nuevoAjax();
	ajax.open('POST', 'guardaComment.php',true);
	ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	ajax.send('nick='+nick+'&email='+email+'&mensaje='+mensaje)
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			comentarios.innerHTML = ajax.responseText;
		}
	}
}

Bueno creo que este código no hace falta explicarlo, es básicamente el mismo código que el post ‘Envio de datos por formulario (I)’.

mostrarContenido();

function mostrarContenido(){
	comentarios = document.getElementById('comentarios');
	ajax = nuevoAjax();
	ajax.open('POST', 'guardaComment.php', true);
	ajax.setRequestHeader('Content-Type', 'text/plain');
	ajax.send('leer=true');
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			comentarios.innerHTML = ajax.responseText;
		}
	}
}

Bien…y cual es la diferencia entre este código y el anterior. Podríamos decir que ninguna, pero el detalle está en que en esta función no necesitamos leer ningún dato del formulario, solamente mostrar los datos de la BBDD. Esta función se ejecutará en el html al cargarlo.

<body onload='mostrarContenido();'>

La tercera parte es el script PHP que se encargará de recibir los datos, insertarlos en la BBDD y hacer la pertinente consulta.

< ?
//----- Establece la conexión con la BBDD -----//
$hostname_ajaxBBDD = 'tuhost';
$database_ajaxBBDD = 'tubbdd';
$usuario_ajaxBBDD = 'user';
$password_ajaxBBDD = 'pass';
$ajaxBBDD = mysql_pconnect($hostname_ajaxBBDD, $usuario_ajaxBBDD, $password_ajaxBBDD) or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($database_ajaxBBDD, $ajaxBBDD);
//---------------------------------------------//

if($_REQUEST['nick']){
	$nick = $_REQUEST['nick'];
	$email = $_REQUEST['email'];
	$mensaje = $_REQUEST['mensaje'];

	$query_Insert = 'Insert into tagboard_prueba values(null,''.$nick.'', ''.$email.'', ''.$mensaje.'')';
	mysql_query($query_Insert, $ajaxBBDD);
}

echo '
<table>';

$query_Recordset = 'Select idtag, nick, email, mensaje from tagboard_prueba order by idtag desc';
$Recordset = mysql_query($query_Recordset, $ajaxBBDD) or die (mysql_error());
$totalRows_Recordset = mysql_num_rows($Recordset);
for($i=1;$i< =$totalRows_Recordset;$i++){
	$row_Recordset = mysql_fetch_array($Recordset);
	echo '<tr>
		<td>Nick: </td>
		<td>'.$row_Recordset['nick'].'</td>
	</tr>
	<tr>
		<td>Email: </td>
		<td>'.$row_Recordset['email'].'</td>
	</tr>
	<tr>
		<td>Mensaje: </td>
		<td>'.$row_Recordset['mensaje'].'</td>
	</tr>
	<tr>
		<td colspan='2'><hr /></td>
	</tr>';
}
echo '</table>';
?>

Explicamos el PHP por encima. Lo primero es establecer la conexión con la BBDD, luego comprobamos si le pasamos un parámetro que sea ‘nick’. Esto nos sirve para limitar si se está llamado desde la funcion ‘cargarContenido();’ o ‘mostrarContenido();’ ya que la primera función envía como parámetro el ‘nick’. Si no se recibe el parámetro ‘nick’ es porque deseamos obtener los datos de la BBDD sin insertar nada.
En cualquiera de los casos, al obtener los datos de la BBDD se ‘imprimen’ mediante echo. Posteriormente la función javascript se encargará de mostrarlo en el div ‘comentarios’ gracias al

comentarios.innerHTML = ajax.responseText;

Y eso es todo. Podeis ver un ejemplo funcionando online: [Tagboard con AJAX]
tagboard.html (1,34 Kb)
ajax.js (0,42 Kb)
functions.js (1 Kb)
guardaComment.php (1,24 Kb)
styles.css (0,83 Kb) [Opcional. Por si queremos darle estilos al formulario]