15-6-2014
Daniel Flores Saladino UNIVERSIDAD TECNOLOGICA DEL VALLE DE TOLUCA
Tic-92
Que es JSON? JSON (JavaScript Object Notation - Notación de Objetos de JavaScript) es un formato ligero de intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo. Está basado en un subconjunto del Lenguaje de Programación JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999. JSON es un formato de texto que es completamente independiente del lenguaje pero utiliza convenciones que son ampliamente conocidos por los programadores de la familia de lenguajes C, incluyendo C, C++, C#, Java, JavaScript, Perl, Python, y muchos otros. Estas propiedades hacen que JSON sea un lenguaje ideal para el intercambio de datos. JSON está constituído por dos estructuras:
Una colección de pares de nombre/valor. En varios lenguajes esto es conocido como un objeto, registro, estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo. Una lista ordenada de valores. En la mayoría de los lenguajes, esto se implementa como arreglos, vectores, listas o sequencias.
Marcas.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AdminLTE | Dashboard</title> <link href="../web/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="../web/js/jquery-1.8.3.min.js"></script> <script src="js/BlockUi.js"></script> <!-- Script que permite ejecutar json y mostrar el resultado--> <script src="js/readAccionesMenu.js"></script> <script src="js/accionesUsuario.js"></script> <script src="js/jquery.dataTables.js"></script> <link rel="stylesheet" href="../web/css/demo_table_jui.css" type="text/css" media="screen"> </head> <body class="skin-blue"> <div id="div_marcas" class="contenido_menu"> <!--Muestra el resultado--> <div id="div_contenedor_tablaCargados"></div> </div> <script src="../web/js/bootstrap.min.js" type="text/javascript"></script> </body> </html>
readAccionesMenu.js function que permite mandar a llamar la consulta a la bd y llenar un array y convertirlo mediante JSON jQuery(document).ready(function() { llamarDatosMarcas(); }); /* Mandamos llamar todos los datos encontrado en la tabla marcas*/ function llamarDatosMarcas(){ $.post('acciones/procesa_marcas.php', {}, function(resultados) { console.log(resultados); var lista = JSON.parse(resultados); var datosTablaCargados= new Array(); for(var i=0;i<lista.length; i ++ ){ datosTablaCargados[i] = new Array(); datosTablaCargados[i][0]=null; datosTablaCargados[i][0]=lista[i].id; datosTablaCargados[i][1]=lista[i].marcas; if(lista[i].activo=="si"){ datosTablaCargados[i][2]="<center><a onclick='llamarImagenesArchivo("+lista[i].id+");' data-toggle='modal' data-target='#compose-modal'><img src='../web/img/activo.png' width='15px'>&nbsp;&nbsp;<a onclick='llamarMarca("+lista[i].id+");' datatoggle='modal' data-target='#compose-modal_modificar'><img src='../web/img/editar.png' width='15px'>&nbsp;&nbsp;<a onclick='llamarImagenesArchivo("+lista[i].id+");' data-toggle='modal' datatarget='#compose-modal'><img src='../web/img/eli.png' width='15px'></center>"; } else{ datosTablaCargados[i][2]="<center><a onclick='llamarImagenesArchivo("+lista[i].id+");' data-toggle='modal' data-target='#compose-modal'><img src='../web/img/desactivado.png' width='15px'>&nbsp;&nbsp;<a onclick='llamarMarca("+lista[i].id+");' data-toggle='modal' data-target='#compose-modal_modificar'><img src='../web/img/editar.png' width='15px'>&nbsp;&nbsp;<a onclick='llamarImagenesArchivo("+lista[i].id+");' data-toggle='modal' datatarget='#compose-modal'><img src='../web/img/eli.png' width='15px'></center>"; } } setTimeout(function(){ init_llenarTabla_Marcas(datosTablaCargados); },50); }).error( function(){ console.log('Error al ejecutar la petici贸n'); } ); }
MANDA A LLAMAR LA FUNCIO Y PERMITE ACOMODAR LA INFORMACION ENCONTRADA EN UNA TABLA
accionesUsuario.js function init_llenarTabla_Marcas(datosTabla){ $("#div_contenedor_tablaCargados").html( '<table cellpadding="0" cellspacing="0" border="0" style="margin-top:10px;" id="example2" class="table table-bordered table-hover">' + '<thead>' + '<tr>' + '<th>Id</th>' + '<th>Marca</th>' + '<th></th>' + '</tr>' + '</thead>' + '<tbody>' + '</tbody>' + '</table>' ); $("#example2").dataTable( { "aaData": datosTabla, "bJQueryUI": false, "sPaginationType": "full_numbers", "oLanguage": idiomaEspanol, "bLengthChange":false, "iDisplayLength":10 }); setTimeout(function(){
desbloqueaPantalla(); },100); }
Procesa_marca.php <?php require_once("conexion/conexion.php"); $lista = array(); $sql = "SELECT * FROM marcas"; $rs=mysql_query($sql,Conectar::conexion()); while($row =mysql_fetch_array($rs,MYSQL_ASSOC)){ $row_array['id']=$row['ID_MARCA']; $row_array['marcas']=$row['MARCA']; $row_array['activo']=$row['ACTIVO']; array_push($lista,$row_array); } echo json_encode($lista); ?>
RESULTADO