RSS

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

09 Mar

La base de datos se llamará formulario y la tabla dentro de ella usuarios . La base de datos y todos los archivos están en el zip con el ejemplo completo. O puedes ver en funcionamiento el ejemplos desde aquí

Lo primero que se hará es escribir código en el ajax.js que estará a la espera de del evento submit y hará la petición de ajax, espero que los comentarios que dejo en el código sean de ayuda para entender el funcionamiento. (Si es el caso y quieres aportar, ya sea código o mejorar la explicación, por favor contáctame a ringhugos@gmail.com)

jqueryEn el archivo js/ajax.js contendrá lo siguiente:

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();
        //La tarea es el nombre de la función que ejecuta ajax_funciones.php
        var tarea   = "subirFormulario";

        $.ajax({
			//El archivo encargado es ajax_funciones.php
            url: 'php/ajax_funciones.php',
            //Las variables que se obtuvieron del formulario se pasan por POST
            type: 'POST',
            //data es un cadena formada con las variables obtenidas y la tarea
            //Un ejemplo de la cadena generada de un formulario que se envió:
            //tarea=subirFormulario&nombre=Hugo&usuario=ringhugos&mail=ringhugos4%40gmail.com
            data: {tarea: tarea, nombre:nombre, usuario:usuario, mail:mail},
        }).done(function (resp){
            //Se obtiene el json, parseJSON lo hace "manejable"
            var data = jQuery.parseJSON(resp);

			//#respuestaAjax es el article que recibirá esta respuesta
			//Se pone la imagen
			//Se muestra el mensaje
			//Se quita la imagen (desvanece)
            $('#respuestaAjax').html('
<div style="margin:0 auto; width:80px; height:40px;"><img id="image" src="images/wait.gif"/></div>
').fadeIn("slow");
            $("#respuestaAjax").append(data.subido[0]);
            $("#image").fadeOut(2500);
        });

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

Ahora en php/ajax_funciones.php contiene esto:

<?php
	//Manejo de BD
	require_once 'myDBC.php';

	//Esta función verifica que se haya hecho una petición ajax
	function is_ajax() {
		return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
	}

	//Si la petición fue exitosa...
	if (is_ajax()) {

		// ... Verificar que lo que pasaste por POST/GET en la función ajax
		// Es opcional verificar pero obviamente es mejor hacerlo
		// BLOQUE UNO
		if( isset($_POST['nombre']) && isset($_POST['usuario']) && isset($_POST['mail'])) {
			$tarea = $_REQUEST["tarea"]; //Obtienes el nombre de la tarea
			//Si la tare corresponde con la que quieres
			//Llamas a dicha función
           	if ($tarea == 'subirFormulario'){
				subirFormulario();

			}
		}
	}

	// BLOQUE DOS
	function subirFormulario(){
		//Obtienes los datos que requiere el método insertar
		//En este caso, las que se pusieron en el formualario
		$nombre = $_REQUEST["nombre"];
        $usuario = $_REQUEST["usuario"];
        $mail = $_REQUEST["mail"];

		//Se hace el insert con el método encargado
		$objeto = new myDBC();
		$resp = $objeto->insertar($nombre, $usuario, $mail);

		//Se imprime el json pero no se mostrará tal cual
		//Sino que será tomado por el ajax-> parseJSON
		print_r( $resp);
	}

	/* Si quieres poner otro método que haga otra cosa, debes
	 * poner otro BLOQUE 1, es decir, verificar que se hizo la petición ajax con una tarea
	 * y un BLOQUE DOS, es decir, la función encargada de realizar dicha tarea */
?>

El código para php/myDBC.php que se encarga de hacer el INSERT de la información obtenida es el siguiente:

<?php
class myDBC{

    public $mysqli=null;

    public function __construct(){

        include_once 'dbconfig.php';
        $this->mysqli = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);

        if ($this->mysqli->connect_errno){
            echo "Error MySQLi: ("&nbsp. $this->mysqli->connect_errno.") " . $this->mysqli->connect_error;
            exit();
        }
        $this->mysqli->set_charset("utf8");
    }

    public function __destruct(){
        $this->CloseDB();
    }

    public function runQuery($qry){
        $result = $this->mysqli->query($qry);
        return $result;
    }

    public function CloseDB(){
        $this->mysqli->close();
    }

    public function clearText($text){
        $text = trim($text);
        return $this->mysqli->real_escape_string($text);
    }

    public function insertar($nombre, $usuario, $mail){

		//Se inserta la información en la tabla
		$sql = "INSERT INTO usuarios (nombre, usuario, mail) VALUES ('$nombre', '$usuario', '$mail')";
		$result = $this->mysqli->query($sql);
		//Aquí se puede comprobar que se ejecutó bien el query
		//Si se subió bien, creamos un array con el mensaje
		$subido = array('Subido Correctamente');

		//Vamos por todos los datos de la tabla
		//Y los colocamos en un array llamado $valores
		$sql = "SELECT * FROM usuarios";
		$result = $this->mysqli->query($sql);

		$valores = array();
		while($row = $result->fetch_object()){
			array_push($valores, $row);
		}

		//Teniendo el arreglo con los datos
		//Se juntan $subido y $valores en un solo array
		//Y se regresa un json con ambos arrays
		$par = array("subido" => $subido, "info" => $valores);

		return json_encode($par);
	}	

}//Fin Clase
?>

Hasta aquí ya podemos probar el ejemplo 😀 Claro, el formulario se ve vacío porque se limpia. La imagen de carga se desvanece y solo deja el mensaje 🙂

ajaxImagenCargaEstas dos páginas son muy buenas para generar las imágenes de carga. La primera tiene todos los clásicos como el que se muestra en este ejemplo y puedes cambiar el color, se llama www.ajaxload.info y otro sitio para generar gifs animados de carga con muchas figuras, incluso en 3D es preloaders.net

Anuncios
 
Deja un comentario

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

 

Responder

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: