RSS

Mini-ejemplo HTML-CSS-PHP-MySQL-JQuery (4/4)

09 Mar

Para terminar con el mini-ejemplo, se le agregarán algunas instrucciones al archivo ajax.js para generar una tabla con los datos recibidos en el json. En dicho json vienen dos arreglos: el que lleva el mensaje de “subido correctamente” (que se llama subido) y otro arreglo con todos los datos de la tabla (que se llama info), Aquí veremos cómo usar dos json en el ‘done’ de ajax Aquí puedes ver el ejemplo funcionamiento

ajax_blog

El código agregado es el siguiente:

Los archivos php/ajax_funciones.php y php/myDBC.php son exactamente lo mismo. El código se verá así:

jQuery(document).ready(function($) {

	$("#formulario").on("submit", function(e){
		/* Obtener valores de los campos del formulario*/
		var nombre	= $("#nombre").val();
		var usuario = $("#usuario").val();
		var mail 	= $("#mail").val();

        var tarea	= "subirFormulario";

        $.ajax({
			url: 'php/ajax_funciones.php',
			type: 'POST',
			data: {tarea: tarea, nombre:nombre, usuario:usuario, mail:mail},
		}).done(function (resp){
			/*Destacar que el json contiene lo siguiente: Ambos arreglos, es decir,
			 * 1. el que se llama subido con un solo elemento
			 * 2. el que se llama info y contiene todos los usuarios en la tabla
			 * {"subido":["Subido Correctamente"],
			 * "info":[{"id":"1","nombre":"Hugo","usuario":" ringhugos","mail":"ringhugos@gmail.com"},
			 * {"id":"2","nombre":"Araceli","usuario":"aralea","mail":"constanza@gmail.com"}...
			 * */

			//parseJSON lo hace "manejable"
			var data = jQuery.parseJSON(resp);

			$('#respuestaAjax').html('<div style="margin:0 auto; width:80px; height:40px;"><img id="image" src="images/wait.gif"/></div>').fadeIn("slow");
			$("#image").fadeOut(2500);

		    //Vaciar el contenido del div en cada subida
		    $("#tablaUser").empty();
		    //Obtener longitud de elementos para iterar
			var data_l = data.info.length;

			//Crear tabla a la que se le agregarán elementos tr td th
			var table = $('<table></table>').addClass('foo');
			//El nombre de las columnas
			var header = $("<tr><th>ID</th><th>Nombre</th><th>Usuario</th><th>Mail</th></tr>").addClass('foo2');
			//A la variable table se agrega el encabezado
			table.append(header);

			//Se itera sobre el json
			for (var i = 0; i < data_l; i++){
				var row = $('<tr>').addClass('bar').html("<td>"+data.info[i]["id"]+"</td>"+ "<td>"+ data.info[i]["nombre"] +"</td>"+"<td>"+data.info[i]["usuario"]+"</td>"+"<td>"+data.info[i]["mail"]+"</td></tr>");
				table.append(row);
			}

			$("#tablaUser").append(table);
			$("#respuestaAjax").html(data.subido[0]);
        });

        $('#formulario')[0].reset();
		e.preventDefault();
		return false;
	});
});

Con este termina el mini-ejemplo que puedes descargar directamente desde mi googleDrive con todas las librerías y css responsive listo para usarse 😀

Por favor, comenta que te pareció el ejemplo y toda crítica constructiva será bienvenida 😉

 
Deja un comentario

Publicado por en 9 marzo, 2015 en HTML, CSS, JQUERY, PHP

 

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: