Spiga

jQuery + jSont + PHP + MySql …. me encanta :D

October 09, 08 by admin

Voy a intentar explicaros como cargar los datos de nuestra base de datos usando JavaScript con las librerias(jQuery y jSonT) y PHP.
Lo primero es conocer cada elemento que vamos a usar:
jQuery es una librería en JavaScript diseñada para otorgar a nuestra aplicación todas las ventajas de la tecnología Ajax una de las más populares.
jSonT también es una librería para JavaScript que usaremos para representar los valores de la base de datos en tablas, en ella podemos definir plantillas que podremos ir utilizando para la representación de la información en tablas.
PHP lo usaremos para la comunicación con la base de datos, y la definición de clases si fuera necesario.
MySql es el motor de base de datos elejido.

Empezaremos con el fichero html index.html
<html>
<head>
<title>Ejemplo</title>
<script src=”js/jquery.js”         language=”Javascript”></script>
<script src=”js/jsont.js”         language=”Javascript”></script>
<script src=”js/jsont-style.js” language=”Javascript”></script>
<script src=”js/myajax.js” language=”Javascript”></script>
<script>
loadTable(“table_productos”, get_data(‘products’, ‘getAll’, ”), ‘products_jsont’);
</script>
</head>
<body>
<div id=”table_productos”>

</div>
</body>
</html>

Declaramos las librerias jquery y jsont, el archivo jsont-style.js será donde definiremos las plantillas de jsont.

Creamos un div donde cargaremos la tabla con los datos.

Llamamos a la función loadTable que a su vez llama a get_data, veremos lo que hace a continuación.

myajax.js

function loadWeb(pag) {
if (typeof window.ActiveXObject != ‘undefined’ ) req = new ActiveXObject(“Microsoft.XMLHTTP”);
else req = new XMLHttpRequest();
req.open(“GET”, pag, false);
req.send(null);
return req.responseText;
}
function get_data( place, func , more){
var code = “include/interfaz.php?type=”+ place +”&function=”+ func + more;
var res = loadWeb( code );
return eval(res);
}
function loadTable( strId, xarray, type ){
$( “#”+ strId ).append(jsonT(xarray, t[type]));
}

loadWeb nos cargara el contenido de una web de manera sincrona, con esto conseguimos capturar el json generado por en el archivo interfaz.php en una variable javaScript
get_data es la encargada de llamar a loadWeb, definimos dentro de la estructura de interfaz.php indicarles que hacieones debe tomar
loadTable nos creará la tabla en la id que le indiquemos como parámetro con el codigo json devuelto por get_data y con la plantilla jSonT

jsont-style.js
var t = new Array;
t["products_jsont"] = { “self”: “<table id=”products_table”>{$}</table>”,
“self[*]“: “<tr id=’{$.id_product}’><td>{$.name}</td><td>{$.description}</tr>” };

Aquí tenemos la plantilla que vamos a usar en este caso concreto para los datos de productos.

Pues en definitiva, un mecanismo muy potente y poderoso para hacer autenticas maravillas.

Espero no haberme saltado nada :S

Add your comment

2 responses for this post

  1. xocer Says: 10.10.08 at 11:22 am

    Un ejemplo práctico??? ;)

  2. Denis Says: 10.10.08 at 11:43 am

    Pues por la busqueda de esta alternativa me vino al intentar crear tablas con la información contenida en base de datos y que el cliente pueda editar campos, añadir filas, ordenarlas, borrarlas etc… y todo de la manera más alternativa posible. Eso lo hacemos gracias a jQuery que se encargará de dotando dinamismo a la aplicación a la vez que va llamando al interfaz php y va actualizando la base de datos.

    jejeje espero que quede claro, sé que debería poner ejemplos y tal, pero eso es tiempo, que actualmente no tengo.

    Disculpa, y un abrazo xocer

Leave a Reply