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 ...
<!DOCTYPE HTML>
<html>
<head>
<title>Enviar formulario con Ajax Jquery</title>
<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"; // El script a dónde se realizará la petición.
$.ajax({
type: "POST",
url: url,
data: $("#formulario").serialize(), // Adjuntar los campos del formulario enviado.
success: function(data)
{
$("#respuesta").html(data); // Mostrar la respuestas del script PHP.
}
});
return false; // Evitar ejecutar el submit del formulario.
});
});
</script>
</head>
<body>
<p>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.</p>
<p>El Array contiene los siguientes nombres ... <b>antonio, pedro, alberto</b></p>
<center>
<form method="post" id="formulario">
<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 = "";
/* Filtrar los datos */
$nombre = addslashes(htmlspecialchars($_POST["nombre"]));
/* Crear un Array. Simulando una consulta a una base de datos */
$array = array("antonio", "pedro", "alberto");
/*Buscar en el array */
for ($x=0; $x<count($array); $x++)
{
if ($nombre == $array[$x])
{
$resultado = "<p>El nombre ".$array[$x]." <b>SI</b> se encuentra en la base de datos</p>";
}
}
if($resultado == "")
{
echo "<p>El nombre ".$nombre." <b>NO</b> se encuentra en la base de datos</p>";
}
else
{
echo $resultado;
}
?>
 |
| Ajax Form |
 |
| Ajax Form |
11 comentarios:
CAMARA LA NETA QUE BUEN PARO ME HIZO ESTE CODIGO LLEVABA 3 DIAS INTENTANDO CON DIFERENETE METODOS AJAX JQUERY Y NADA HASTA QUE PROBE CON EL TUYO Y DIOS DIJO HAGASE LA LUZ Y ESTE PROGRAMA ME AYUDO
Muy bueno el ejemplo y claro, especial para principiantes como yo.
Excelente. Y yo buscando en sitios gringos pensando que alguno de ellos daría un mejor ejemplo. Este es claro como el agua.
Felicitaciones y gracias!
Excelente dato, una pregunta pero si lo que voy a subir es un archivo, ya que en el form lleva el atributo enctype="multipart/form-data"
Gracias espero atento la respuesta..
Pues básicamente lo mismo, captura la variable $_FILES y analiza las propiedades del archivo a subir, ya sabes, tamaño de archivo, tipo de archivo, etc, ... si pasa el filtro pues guardas el archivo en el servidor, saludos.
El asunto cuando se intenta enviar fotos es un poco más complejo, también lo estoy investigando cuando tenga la respuesta la publico en mi blog.
http://enseniameelcodigo.blogspot.com/
Lo que no entiendo, es esta parte:
" $("#respuesta").html(data);"
de donde sale el (data) ?????
Me ha sido de mucha ayuda. ¡Mil gracias por tu trabajo!
Muchas gracias, me sirvió de MUCHÍSIMO. Sencillo y conciso.
Muy bueno realmente impecable yo tambien varios dias buscando algo bueno que valide php te felicito por el post saludos desde Argentina!!!
Lunes 25 de Julio de 2016 ... y tu trabajo sigue ayudando
Muchísimas gracias
Publicar un comentario