Bueno, aqui les traigo un pequeño pero significativo ejemplo del uso de Ajax con Jquery…
La técnica ajax se caracteriza por obtener resultados del servidor de forma asincrona (sin hacer un refresh a nuestra página), no voy a profundizar en la definición ,pero si queren hacerlo pueden verlo aquí.
Voy a dividir el Post en 3 pasos:
- Crear la Base de datos y tabla
- Crear los Scripts PHP
- Crear el formulario que usará Ajax
Allá vamos …
El ejemplo que haré es de registrar datos en una tabla y obtener una respuesta del servidor con AJax-Jquery, pueden descargar jquery desde aquí
1. Crear la Base de datos y tabla : para realizar esta operación habrimos algún cliente Mysql, por ejemplo Mysql-query-browser y ejecutamos el siguiente codigo :
- create database peopledb charset utf8;
- use peopledb;
- create table person(
id_person int not null auto_increment,
name_person varchar(150),
description_person varchar(150),
primary key(id_person)
)Engine ‘InnoDB’ charset ‘utf8′;
con esto ya tenemos nuestra base de datos preparada…ahora nos vamos al paso 2
2. Crear los Scripts PHP : En esta parte crearé 2 pequeñas clases llamadas conection.class.php y action_record.class.php ,y creare un fichero que se encargará de devolver el resultado de forma asincrona,el cual se llama response.inc.php ; ahora describire cada fichero .php
fichero : conection.class.php
<?php
//clase que se conecta a mysql
class conection {
private static $cn=”;
private static $rs=”;
private static function my_connection () {
self::$cn=new mysqli(“localhost”,”root”,”",”peopledb”);
}
public static function my_query ($sql) {
self::my_connection ();
self::$rs = self::$cn->query($sql);
}
public static function my_result ($sql) {
$my_content=array();
self::my_query($sql);
while ( $row=self::$rs->fetch_array(MYSQLI_ASSOC) ) {
$my_content[]=$row;
}
return $my_content;
}
}
?>
—clase action_record — : permite realizar acciones(insertar,eliminar,modificar) sobre la base de datos
fichero : action_record.class.php
<?php
require_once ‘conection.class.php’;
//clase que permite realizar acciones sobre la DB
class action_record extends conection {
private static $array_people;
function action_record() {
}
//metodo para realizar insert,update o delete
public function record_people($sql) {
parent::my_query($sql);
}
//recupero datos para una consulta
public function show_people ($sql) {
self::$array_people=parent::my_result($sql);
}
//numero de filas en la DB
public static function number_of_people() {
return count(self::$array_people);
}
}
?>
fichero : response.inc.php
<?php
//importamos el metodo de la clase action_record
require_once ‘action_record.class.php’;
//defino un array,el cual tendrá los valores(nombre y descripción) ingresados por el formulario
$my_data=array();
$my_data= isset( $_POST['my_data'] ) ? explode(‘,’,$_POST['my_data']) : ”;
//asigno los valores a variables
$my_name=$my_data[0];
$my_description=$my_data[1];
if ( count($my_data)>0 ) {
//metodo reutilizable para realizar insert,delete,update
action_record::record_people(“INSERT INTO person(name_person,description_person) values(‘”.$my_name.”‘,’”.$my_description.”‘)”);
action_record::show_people(‘SELECT*FROM person’);
$count=action_record::number_of_people();
$message=‘Datos grabados correctamente – Numero de personas en la DB:’.$count; //mensaje que se mostrará en pantalla
} else {
$message=‘Se produjo un error…’; //mensaje que se mostrará en pantalla
}
//mensaje que se mostrará en el alert de javascript
echo $message;
?>
3.Crear el formulario que usará Ajax : bueno y al fin crearemos el respectivo formulario Ajax,el cual constará de 2 cajas de texto,un botón y un div,en el cual se mostrará el resultado de grabar el dato…
/**Pantalla**/
formulario ajax
el codigo del formulario,lo pondré al final para que lo descarguen…
ahora la explicación de jquery :
-Nos ubicamos dentro de las etiquetas <HEAD> Y </HEAD> y escribimos lo siguiente :
<script type=”text/javascript” src=”javascript/jquery-1.2.6.js”></script> , con esto le estamos diciendo al navegador que estamos importando un fichero javascript que se encuentra dentro de la carpeta javascript y cuyo nombre es jquery-1.2.6.js , esto es super importante…
ahora hacemos algo similar pero para usar los metodos(funciones) que tiene jquery…y escribimos es siguiente codigo :
<script type=“text/javascript”>
//inicializamos el script jquery
$(document).ready(function (){
//añadimos el evento click al botón del formulario
$(“#mybutton”).click(function (){
//obtenemos todos los inputs como un array,a los cuales los llamé my_name
my_array=document.getElementsByName(‘my_name’);//obtiene un array de objects
my_new_array=new Array();//obtiene un array con valores de las cajas de texto
//este for se encarga de llenar el array que se va enviar con valores de las cajas de texto
for (i=0;i<my_array.length;i++) {
my_new_array[i]=my_array[i].value;
}
//creamos un objeto ajax
if (confirm(‘Esta seguro que desea grabar estos datos????’)) {
$.ajax({
contentType: “application/x-www-form-urlencoded”,
beforeSend: function(objeto) {
$(“#Id_Div_Status”).html(”Cargando…’); },
type: “POST”,
url: “addres/response.inc.php”,
data: ‘my_data=’+my_new_array,
success: function(datos){alert(datos);
$(“#Id_Div_Status”).html(‘Dato grabado correctamente…’); /* el html de jquery es la representación de innerHTML según Javascript */
},
});
} else {
$(“#Id_Div_Status”).html(‘los datos no han sido grabados aún…’);
}
});
});
</script>
Enero 13, 2009 a las 6:46 am |
mi primer ajax, interesante.
y con sript incluido
analizandoo…………………..
Enero 13, 2009 a las 8:40 am |
Buenaza bien he con la información y el código me va servir bastante gracias he ….
Enero 13, 2009 a las 5:52 pm |
Muy Bueno isaac, ahora si me das una idea de como generar una clase Ajax personalizado, saludos, seria bueno que te hagas otro para saber como utilizar el FIRE PHP
Enero 13, 2009 a las 6:15 pm |
ta legal me sirvio de mucho para hacer un trabajo gracias
Enero 19, 2009 a las 3:25 pm |
gracias por el tutorial iniciare a ensayar a ver que puedo hacer con esto :D
Enero 29, 2009 a las 2:19 pm |
Hola amigo.
Excelente!
Muestras de manera facil una tecnologia complicada XD
felicitaciones!!
Marzo 18, 2009 a las 6:20 am |
Buen articulo,pero lo he ejecutado en Internet Explorer 6, y no funciona.Da un error, en el javascript, linea 37 , caracter 6, expected identifier ,string or number.
Marzo 25, 2009 a las 8:13 pm |
Yo lo probe en mozilla y funciona correctamente, porfis prueba
Abril 8, 2009 a las 3:47 pm |
Excelente de verdad que sip… ahora kon este tutorial voy a empezar a realizar un trabajito y mirar que tanto me sirve.. bueno soy muy nuevo en esto de la programacion y mucho mas en el manejo de Ajax y Jquery espero me puedas kolaborar xque veo que si tenes muy buen konocimiento sobre el tema… suerte y el konocimiento tiene que ser kompartido viva esa…
Abril 8, 2009 a las 10:07 pm |
Gracias por tus comentarios Petro. Por favor, si quieres que seguimos aceptando tus comentarios, gracias de hacer un esfuerzo de vocabulario en tu propia idioma. Expresarse bien en su propio lenguaje es el primer paso hacia buena programación!
Abril 8, 2009 a las 4:08 pm |
Que mas Isaac komo estas…..
Isaac me gustaria saber…. si a esta script que tienes hecha le pudieras adicionar las opciones de mostrar el contenido que hay en la BD y la opcion de eliminar y modificar la respectiva informacion ya que apenas toy empezando a conocer este mundo del desarrollo web… y veo que hay muchos comandos que no konoxko… de igual manera para documentarme mucho mas he ir obteniendo mucho mas konocimiento de este mundo web que es muy kool… suerte y nuevamente gracias….
Mayo 10, 2009 a las 11:16 pm |
Hola gracias por tu excelente ejemplo, quisiera que me ayudaran con lo siguiente: quiero mostrar los nombres y apellidos de un dato consultado con autocomplete hecho con jquery(mysql, php). Gracias
Julio 2, 2009 a las 2:27 am |
el la liga de descarga me redirecciona a otra pagina
Julio 16, 2009 a las 9:40 pm |
el link, no funciona ahora debido a que estoy cambiando de servidor en ésta semana lo vuelvo a poner…bye
Agosto 17, 2009 a las 8:40 pm |
muy bueno
Agosto 25, 2009 a las 12:14 pm |
Excelente!
desde hace rato pegado con lo de la insercion de datos pero con el Jquery esta genial.
Muchas gracias
Septiembre 18, 2009 a las 7:45 pm |
Inpresentable: “ahún” se escribe sin H
Septiembre 18, 2009 a las 7:58 pm |
Gracias. Fuiste el primero a reportarlo en casi 9 meses! Viendo que tan cerca está la h de la u, creo que es posible que haya sido un dedo aleatorio… Corregido, de toda forma.
Noviembre 2, 2009 a las 10:21 am |
El problema del internet explorer es de eliminar una coma en la linea 35 y ademas eliminar el password del archivo connetion quitar ‘dokeosla’
Noviembre 2, 2009 a las 11:24 am |
Excelente tutorial. Te felicito. Sin embargo tengo la siguiente duda: por que tanto código PHP y por que esta todo orientado a objetos? Considero que todo ese código se pudiera resumir con unos mysql_query. Es la unica forma de utilizar eljquery con php y mysql?
Otra pregunta. Como le podemos hacer para hacer un SELECT a la base de datos con el jquery. Osea que aprietetes un boton y se carguen cierta cantidad de datos. GRACIAS! y de nuevo muchas felicidades.
Noviembre 2, 2009 a las 11:26 am |
Hola DAron Wolff. Te dejo esta liga para que revises. Es para hacer algo similar a lo que pides.
Ojala que el propietario de esta web no lo elimine
http://www.reynoldsftw.com/2009/03/live-mysql-database-search-with-jquery/
Noviembre 12, 2009 a las 11:41 am |
El ejemplo muy bueno, lo probe y funciona perfectamente,el único problema es que no muetra los mensajes desplegados con echo que estan en las páginas php, sólo muestra los mensajes que están en la página principal. tu tienes un mensaje en la página response.inc.php indicando si hay error en la grabacion. resulta que yo cambie el nombre de uno de los campos en la tabla y al intentar grabar el obviamente no me grabo, pero tampoco mostró el mensaje de error. Cómo lograr que los mensajes de las páginas php se muestren en la ejecución. Gracias.
Noviembre 28, 2009 a las 3:31 pm |
Hola tengo una consulta, como se muestra el mensaje de error contenido en la variable message del script php en caso de existir. La pregunta es como muestro un echo desde la url .php dentro del formulario en el caso que quiera realizar un insert y este no se cumpla por xmotivo, como muestro ese motivoP???? ojala alguien pueda ayudarme.
Diciembre 18, 2009 a las 10:55 am |
Hola, estoy empezando a usar php mysql jquery…
ya he trabajado con jquery pero con asp .net y todo bien.(esto q pongo lo he hecho con asp.net y funciona correcto)
Tengo el siguiente detalle, haber si me puedes ayudar.
tengo un formulario en html, entonces, cuando se carga la pagina desde javascript mando a llamar un una funcion que està en una pagina php, es una consulta a la bd que me regresa al cliente en formato JSON
“echo $json->encode($data);”
una vez del lado del cliente, genero un datagrid con esos valores… hasta ahi todo bien.
luego, cuando doy de alta un nuevo registro, mando a llamar con javascript a una funcion q esta en una una pagina php q me inserta el registro.. si todo sale bien desde javascript muestro un alert con un aviso de que se inserto el registro y ahi mando a llamar a la funcion para obtener nuevamente todos los registros y mostrarlos en el datagrid, pero no se ve el nuevo registro !!!!
voy a la bd, ejecuto un query para ver si se guardo y si… ahi esta… !!!
para poder visualizarlo en la pagina… tengo q cerrar la pagina y volverla a abrir, en ese momento si se ve el registro q habia guardado.
NI OPRIMIENDO F5 SE ME MUESTRAN LOS NUEVOS REGISTROS
:s, como lo dije antes, tengo cerrar la pagina y volverla a abrir para q se vea el nuevo registro.
esto es lo mismo para modificar, eliminar. no me muestra el resultado en ese momento.
que podra estar pasando?