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

09 Ago
  • Anonymous en comprobar usuario con ajax:
    Samuel.... antes que nada sosssssssss unnnnnnnnnn capoooooooooooooo hace mas de una semana que queria cargar un formulario y que al grabar en la BD me muestre un mensade "Loko Cargaste del gran &%$#*[" y no daba pie en bola.... Gracias a tu ejemplo por fin pude hacer lo que queria.... sos grande... Daniel Talaver de Paraguay

26 Jul
  • Anonymous en codificando y decodificando json:
    Hola.. xajax podria ser una buena alternativa para trabajar con PHP y Ajax, pero para mi gusto preferiria separar el codigo php del codigo Javascript y Html, en este ejemplo en particular aun no se logra al 100% esta separacion,pero al tener tu codigo separado podras reutilizarlo y ademas la ejecucion será en un porcentaje más rapida...Echale un vistazo a : http://es.wikipedia.org/wiki/JavaScript_no_obstructivo

21 Jul
  • Anonymous en comprobar usuario con ajax:
    Me encanto! muchas gracias! alguno tiene una idea para hacerlo sin presionar el boton "disponible", es decir, que el usuario escriba su nick y que al pasar al siguiente input se verifique la disponibilidad de manera automática? gracias!

20 Jul
  • Anonymous en comprobar usuario con ajax:
    Podrias subir nuevamente el código? porque intente descargar y se borro el link. Desde ya muchas gracias. Saludos!

29 Jun
25 May
18 Dic
15 Dic
  • Anonymous en comprobar usuario con ajax:
    He hecho algunas correcciones, el ejemplo que estaba en el ZIP no era el mismo del que estaba en el ejemplo.. :S, ahora si es el mismo, y tambien le puse el Script de la DB, que no estaba antes...Para solucionar el problema de la llamada Ajax pueden utilizar JQuery.. mas adelante pondre algunos post utilizando JQuery...

14 Dic
  • Anonymous en comprobar usuario con ajax:
    Me funciona bien, lo comprobe con el firebug y se que funciona bien, pero me ocurre algo que no logro entender..... cuando aparece el mensaje en el DIV. Automaticamente se borra el texto del cuadro de texto del Nombre de usuario y desaperece el mensaje de Disponible..... es como si se recargara la pagina..... no se por que me ocurre esto.Un saludo. A ver si alguien me puede ayuda....Muchas Gracias.

14 Dic
  • Anonymous en comprobar usuario con ajax:
    ESta muy bien explicado.... la verdad no consegui hacerlo correr y no se por que.Con el firebug me detecta un par de errores en el archivo .js en la linea donde se indica que se cree el objeto active active x.Concretamente me da error en la siguientes lineas:xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");Y No consigo que ejecute el codigo PHP del archivo comprobarUsuario. Puse un echo en la primera linea del arcvhivo para ver…