martes, 1 de diciembre de 2009

.::Codificando y Decodificando JSON PHP+MySQL+JQuery::.

Al momento de realizar aplicaciones con AJAX, necesitamos un formato de intercambio de datos ligero, que haga un buen complemento a nuestras aplicaciones ligeras, si bien es cierto que AJAX(Asynchronous JavaScript And XML), como su nombre mismo lo dice, trabaja nativamente con XML, pero sabemos que al trabajar con este formato es bastante tedioso (No digo que no sea util).. pero como alternativa esta JSON.

"JSON (JavaScript Object Notation) es un formato de datos ligero de intercambio. Es fácil para los seres humanos a leer y escribir. Es fácil para las máquinas para analizar y generar. Se basa en un subconjunto del lenguaje de programación JavaScript, estándar ECMA-262 3 ª Edición - diciembre de 1999. JSON es un formato de texto que es completamente independiente del lenguaje pero utiliza convenciones que son familiares para los programadores de la C-familia de lenguas, incluyendo C, C + +, C #, Java, JavaScript, Perl, Python y muchos otros. Estas propiedades hacen de JSON un conjunto de datos ideal de lengua de intercambio".
Segun la pagina oficial json.org

Y bueno... aqui les traigo un ejemplo... de como utilizar JSON ( Codificar y Decodificar ) utilizando JQuery (Con Plugin para JSON) ,PHP y MySQL:



REQUERIMIENTOS:

- JQuery ( Version para desarrollo) http://code.jquery.com/jquery-1.4.2.min.js

- Para hacer el encode en Javascript utilizaremos el Plugin para JQuery que pueden descargarlo desde aqui: http://plugins.jquery.com/project/json.

- Para el encode y decode en PHP, depende de la versión de PHP que estemos utilizando (Según la pagina oficial de PHP) :
si es mayor a PHP 5.02.0 , podemos utilizar las funciones json_encode() , json_decode(), pero si nuestro servidor tiene una version menor a PHP 5.02.0, no vamos a en contrar esas funciones de forma nativa, por lo que deberemos utilizar un Script, que en este caso utilizaré un script de la pagina http://pear.php.net

Bueno empecemos viendo los archivos que utilizaremos:

- Index.html ( Donde va el formulario y todo el codigo HTML)
- JSON.php ( Extension PHP para codificar y decodificar JSON para versiones menores a PHP 5.02.0)
- abm_demo.php ( Archivo PHP que recibe y devuleve JSON para las Consultar )
- myconexion.php ( Archivo de Conexion a MySQL )
- myScript.js ( Aqui ira el codigo Javascript No Obstructivo)
- jquery-1.4.2.min.js ( JQuery)
- jquery.json-2.2.js ( Plugin para Encode y Decode de JSON en Javascript )

index.html

Nombre:
Apellido:



abm_demo.php [ Cargamos los Scripts necesarios ]
< ?php require_once('./JSON.php'); $json = new Services_JSON();?>< ?php require_once('conexion/myconexion.php'); ?>
[ Logica ]

if(!isset($_GET['acc']))
{

//Cargar Data
mysql_select_db($database_myconexion, $myconexion);
$query_Recordset1 = "SELECT * FROM ejemplo";
$Recordset1 = mysql_query($query_Recordset1, $myconexion) or die(mysql_error());
$dat=array();
while ($row = mysql_fetch_array($Recordset1))
{
$dat[]= $row;
}
echo $json->encode($dat);

//si tienes version superior a PHP 5.02.0, puedes reemplazar:
/*
echo $json->encode($dat);
echo $output;

por

"echo json_encode($dat);"

y no necesitasras ninguna libreria extra.
*/


}
else{
$accion=$_GET['acc'];
switch($accion)
{
case 'guardar':

$data = $_POST['data'];
$data = str_replace('\\','',$data);
$json = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);
$value_ = $json->decode($data);
$ConsultaSQL='INSERT ejemplo(nombre,apellido) values("'.$value_[0]['value'].'","'.$value_[1]['value'].'")';
mysql_select_db($database_myconexion, $myconexion);
$Result1 = mysql_query($ConsultaSQL, $myconexion) or die(mysql_error());
echo '{result:"Ok Insertado Correctamente!"}';
}
}


myScript.js

$(function(){

function traerData()
{
$.ajax({
url:'abm_demo.php',
success:function(rel)
{
var asd=eval(rel);
var tabla='';
tabla+=''+'';
tabla+='';
});
tabla+='
ID<\/td>'+'NOMBRE<\/td>'+'APELLIDO<\/td>'+'<\/tr>';
$.each(asd,function(index,data){
tabla+='
'+data.id+'<\/td>'+''+data.nombre+'<\/td>'+''+data.apellido+'<\/td>'
tabla+='
';

$('#dataContent').html(tabla);
}
});
$('#nombre').focus();
}
traerData();
$('#form1').submit(function()
{
var data=document.form1.elements
var arr=new Array();
for(var i in data)
{
if(data[i].type == 'text'||data[i].type == 'hidden')
{var obj = {};
obj.name=data[i].name;
obj.value=data[i].value;
arr.push(obj);
}
}
var sss=$.toJSON(arr);
$.ajax({
async:true,
success:function(a,b,result)
{
traerData();
var sd=eval(result.responseText);
$('#nombre').val('');
$('#apellido').val('');
habilitar();
alert(sd);
},
data: {data:sss},
url:this.action,
type:this.method
});

return false;
});
});
function habilitar()
{
var apellido = $('#apellido').val();
var nombre = $('#nombre').val();
if(nombre!=''&&apellido!='') $('#submit').attr('disabled','');
else $('#submit').attr('disabled','disabled');
}



-> Descargar <-

->Comentarios<-