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 ahú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