En el siguiente ejemplo, os mostraré como enviar un formulario vía AJAX, este proceso facilitará las consultas necesarias a PHP, todo ello sin tener que refrescar la página cada vez que hay que hacer una consulta, por ejemplo, a una base de datos.
Para el ejemplo vamos a usar dos archivos, uno será un "index.php" que será la página principal y el que albergará el form para realizar las consultas, al otro lo he llamado"dame-datos.php", este archivo recibirá las variables del formulario, las analizará y devolverá un resultado u otro según su valor, todo ello como dije anteriormente sin necesidad de refrescar la página, es la gran ventaja de AJAX.
El archivo index.php contiene un formulario con un campo de texto en el cual se solicita que ingreses un nombre, y un botón para enviar el formulario a través del método POST, a demás de un div dónde se mostrará el resultado de la consulta AJAX.
El archivo dame-datos.php recibe el valor del campo nombre y posteriormente analizar si el nombre se encuentra dentro de un array con tres nombres, si se encuentra devuelve una respuesta positiva y negativa si no es encontrado.
El código del archivo index.php es el siguiente ...
<html><head><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script><script> $(function(){ $("#btn_enviar").click(function(){ var url = "dame-datos.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#formulario").serialize(), // serializes the form's elements. success: function(data) { $("#respuesta").html(data); // show response from the php script. } });
return false; // avoid to execute the actual submit of the form. });});</script></head><body><center><form method="post" id="formulario">Al enviar el formulario vía ajax, consultaremos en el archivo dame-datos.php si el valor del campo nombre se encuentra en el array y la respuestas será positiva o negativa, según su valor.<br>El Array contiene los siguientes nombres ... <b>antonio, pedro, alberto</b><br><table><tr><td>Introduce un nombre:</td><td><input type="text" name="nombre"></td><td></td><td><input type="button" id="btn_enviar" value="Buscar nombre"></td></tr></table></form><div id="respuesta"></div></center></body></html>
El código del archivo dame-datos.php es el siguiente ...
<?php
$resultado = "";
$nombre = htmlspecialchars($_POST["nombre"]);
$array = array("antonio", "pedro", "alberto");
for ($x=0; $x<count($array); $x++)
{
if ($nombre == $array[$x])
{
$resultado = "El nombre ".$array[$x]." <b>SI</b> se encuentra en la base de datos<br><br>";
}
}
if($resultado == "")
{
echo "El nombre ".$nombre." <b>NO</b> se encuentra en la base de datos<br><br>";
}
else
{
echo $resultado;
}
?>
 |
| Ajax Form |
0 comentarios:
Publicar un comentario