Cargando



Jquery Ajax codigo asincronico con php

Tutorial donde explicaremos como vamos crear una función para desde un formulario web consultar una base de datos, tocaremos temas como jquery, ajax y codigo asíncrono con ejemplos.


sep 14 2013 14:17
Jquery AJAX es el soporte del framework Javascript para procesamiento asíncrono de peticiones al servidor de la web.

Se utiliza para la creación de páginas web dinámicas, Estas aplicaciones o paginas web se ejecutan en el cliente, el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano, de esta manera se puede hacer una petición al servidor procesarla y recibir la información procesada sin que el usuario cambie de pagina o deba refresca, ademas es transparente para el usuario, ya que no ve a que pagina se realizo la petición.

Vamos crear una función para desde un formulario web consultar una base de datos
Creamos una web con un formulario que denominaremos index.html

<html>
    <head>
	    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
	    <table>
		    <tr>
			    <td>Nombre:</td>
			    <td><input type="text" name="nombre" id="nombre" /><td>
  		  </tr>
		    <tr>
			    <td>Ciudad:</td>
			    <td><input type="text" name="ciudad" id="ciudad" /><td>
		    </tr>
		    <tr>
			    <td></td>
    <td>
	 <input type="button" name="submit" id="submit" value="Consulta" onclick = "infoclientes()" />
  </td>
		    </tr>
	    </table>
	    <div id="info"></div>
    </body>
</html>

El resultado sera un formulario html con los campos que se detallan, luego la función infoclientes() la creamos luego.

JQuery-ajax-mysql-php.jpg


Creamos ahora la base de datos Clientes que utilizaremos de ejemplo para consultar:

CREATE TABLE  `clientes`.`clientes` (
`id` INT( 10 ) NOT NULL AUTO_INCREMENT ,
`nombre` VARCHAR( 255 ) NOT NULL ,
`ciudad` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY (  `id` )
) ENGINE = INNODB;


Insertamos algunos datos en la base de datos:

JQuery-ajax-mysql-php_2.jpg


Creamos ahora un archivo clientes.php para consultar por nombre y que nos devuelva la ciudad, se podría consultar por cualquier otro campo o varios que se introduzcan en el formulario.

<?php
$nombre = $_POST['nombre'];
$con = mysql_connect("localhost", "root", "");
$db = mysql_select_db("clientes", $con);
$sql = "SELECT ciudad from clientes where nombre like '" . $nomcli . "'";
$rs = mysql_query($sql, $con);
$row = mysql_fetch_array($rs);
echo $row['ciudad'];
?>

La función Ajax ahora que necesitamos para que desde el formulario podamos invocar el archivo php y realizar la petición al servidor. En el <head> creamos la función infoclientes() que habíamos dejado pendiente.

<script>
function infoclientes(){
var nombre = $('#nombre').val();										    // campo del formulario que voy a consultar
$.ajax({																				   // incio petición
type: "POST",																	    //Cuando se haya enviado un formulario
url: "clientes ..php",														   //se invoca el archivo infoclientes.php
data: {nomcli:nombre}													    //asigno el campo a la variable de peticion sql
}).done(function( result ) {												 //recibo el resulta
$("#info").html( " La ciudad es "+result );
$("#ciudad").val(result );
});
}
</script>

Al ejecutar la web index.html podemos escribí el campo nombre y dar un clic en consultar esto nos trae el resultado que se almacena en el div info y en la caja de texto; sin haber refrescado la pagina.

JQuery-ajax-mysql-php_3.jpg


Si tenemos Firebug podemos ver las peticiones, cuanto tardan, que parámetros se utilizaron y cual fue la respuesta del servidor, en este caso esta consulta tomo 30 milésimas de segundo en ejecutarse en el servidor y mostrarse nuevamente en el navegador.

JQuery-ajax-mysql-php_4.jpg


El uso de jquery y ajax permite mejorar la usabilidad de la aplicación se obtiene mayor velocidad, esto debido que no hay que retornar toda la página nuevamente y hacer esperar al usuario.
Se puede consultar información y mostrarla de diferentes maneras según se necesite.

¿Te ayudó este Tutorial?


4 Comentarios


Andres Madonia
jul 17 2014 22:21
Se podria hacer esto sin necesidad de un boton, es decir, que al momento que introduzca el nombre automaticamente se complete el formulario con la ciudad?

alvaro hippoi
ago 21 2014 12:58
Hay alguna forma de poner por dos campos, por ejemplo ciudad y numero de habitantes?

Si fuera posible poder descargar el codigo fuente o una demo funcionando seria de gran ayuda

Gracias

Se podria hacer esto sin necesidad de un boton, es decir, que al momento que introduzca el nombre automaticamente se complete el formulario con la ciudad?


Si se puede pero no sé exactamente cómo activar eso, lo sé porque también lo vi en un proyecto.

Hay alguna forma de poner por dos campos, por ejemplo ciudad y numero de habitantes?

Si fuera posible poder descargar el codigo fuente o una demo funcionando seria de gran ayuda

Gracias

No hay problema en añadir más campos (p.ej el nº de habitantes) para realizar consulta (Que fuera mayor o menor a cierta cifra que se consulta por ejemplo).

Voy a intentar en un futuro añadir más y con algunos ejemplos nuevos ;)
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X