Insertar datos usando Ajax

Author: danielgara - Date: 2013-01-16 14:33:23
 
¿Que es AJAX?
Asynchronous JavaScript And XML (JavaScript asíncrono y XML).

Son aplicaciones que se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

¿Que requiere?
Requiere crear funciones javascript y algunas veces se utiliza jquery (una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web) dentro de estas funciones javascript, para establecer la comunicación con el servidor en segundo plano, y luego modificar algunas partes del aspecto visual de la aplicación una vez finaliza esa comunicación.

¿Como funciona una inserción en AJAX?
  1. Normalmente para utilizar AJAX lo que se hace es que se crea un controlador basico, solo con la función de display.
  2. Se crea un template el cual contiene:
    • Un formulario básico para agregar los datos a la base de datos (este formulario se caracteriza por no tener action lo cual hace que no se envien los datos a ningún controlador o a si mismo).
    • Se le crea un identificador o id a un botón dentro del formulario (generalmente al boton submit).
    • Se crea una función de javascript (algunas veces dentro del template, otras veces en un .js en la carpeta work/js/ y se incluye en el template).
    • Dentro de la función de javascript anterior se usa jquery y DOM para recoger los datos del formulario una vez se de clic en el botón de submit, y se envían los datos mediante el ajax de jquery a un controlador AJAX.
      Al recoger la respuesta del controlador AJAX se modifica la vista para dar mostrar un mensaje de éxito o error según el caso.
  3. Se debe crear un controlador ajax el cual es muy parecido a un controlador normal pero tiene 2 grandes diferencias: el nombre de la clase del controlador empieza por a_ y no por c_. Y lo segundo es que no cuenta con zona de display, solo con funciones propias. Y una vez finaliza la ejecución de las funciones propias debe hacer echo para retornar los datos a la función de javascript del template.

Ejemplo de Inserción usando AJAX
  1. Vamos a trabajar con la clase mensaje la cual consta de 2 atributos que son id (autoincrementable) y mensaje que es un STRING.
    Debemos crear al CRUD de mensaje para verificar que si esta funcionando el sistema del siguiente modo: ingresamos a la ruta work/admin/creator.php y pegamos el siguiente código en el campo de Preload Data
    Code:
    option=add&class_n=mensaje&bd_engine=InnoDB&c_class=on&c_table=on&c_controller=on &c_template=on&c_edit=on&name%5B%5D=Id&id%5B%5D=id&type%5B%5D=int &tamano%5B%5D=&type_form%5B%5D=text&html%5B%5D=no&values%5B%5D= &required%5B%5D=not+null&autoincrement%5B%5D=yes&foreign_name%5B%5D= &foreign%5B%5D=&foreign_attr%5B%5D=&primary%5B%5D=yes &name%5B%5D=mensaje&id%5B%5D=mensaje&type%5B%5D=string &tamano%5B%5D=100&type_form%5B%5D=text&html%5B%5D=no&values%5B%5D= &required%5B%5D=not+null&autoincrement%5B%5D=no&foreign_name%5B%5D= &foreign%5B%5D=&foreign_attr%5B%5D=&primary%5B%5D=no&name%5B%5D= &id%5B%5D=&type%5B%5D=string&tamano%5B%5D=&type_form%5B%5D=text &html%5B%5D=no&values%5B%5D=&required%5B%5D=not+null &autoincrement%5B%5D=no&foreign_name%5B%5D=&foreign%5B%5D= &foreign_attr%5B%5D=&primary%5B%5D=no&name%5B%5D=&id%5B%5D= &type%5B%5D=string&tamano%5B%5D=&type_form%5B%5D=text&html%5B%5D=no &values%5B%5D=&required%5B%5D=not+null&autoincrement%5B%5D=no &foreign_name%5B%5D=&foreign%5B%5D=&foreign_attr%5B%5D= &primary%5B%5D=no&name%5B%5D=&id%5B%5D=&type%5B%5D=string &tamano%5B%5D=&type_form%5B%5D=text&html%5B%5D=no&values%5B%5D= &required%5B%5D=not+null&autoincrement%5B%5D=no&foreign_name%5B%5D= &foreign%5B%5D=&foreign_attr%5B%5D=&primary%5B%5D=no&name%5B%5D= &id%5B%5D=&type%5B%5D=string&tamano%5B%5D=&type_form%5B%5D=text &html%5B%5D=no&values%5B%5D=&required%5B%5D=not+null &autoincrement%5B%5D=no&foreign_name%5B%5D=&foreign%5B%5D= &foreign_attr%5B%5D=&primary%5B%5D=no&name%5B%5D=&id%5B%5D= &type%5B%5D=string&tamano%5B%5D=&type_form%5B%5D=text&html%5B%5D=no &values%5B%5D=&required%5B%5D=not+null&autoincrement%5B%5D=no &foreign_name%5B%5D=&foreign%5B%5D=&foreign_attr%5B%5D= &primary%5B%5D=no&name%5B%5D=&id%5B%5D=&type%5B%5D=string &tamano%5B%5D=&type_form%5B%5D=text&html%5B%5D=no&values%5B%5D= &required%5B%5D=not+null&autoincrement%5B%5D=no&foreign_name%5B%5D= &foreign%5B%5D=&foreign_attr%5B%5D=&primary%5B%5D=no
    Damos clic en Preload Data, una vez carguen todos los datos damos clic en Send para crear el CRUD

  2. Creamos el controlador insert_data.php en la ruta work/insert_data.php con el siguiente contenido (como vemos este controlador hace referencia al paso 1):
    <?php

    require('./configs/include.php');

    class 
    c_insert_data extends super_controller {

        public function 
    display()
        {
            
    $this->engine->display('header.tpl');
            
    $this->engine->display('insert_data.tpl');
            
    $this->engine->display('footer.tpl');
        }
        
        public function 
    run()
        {
            
    $this->display();
        }
    }

    $call = new c_insert_data();
    $call->run();

    ?>

  3. Creamos el template insert_data.tpl en la ruta work/templates/t_dark/insert_data.tpl con el siguiente contenido:
    {literal}
    <script type="text/javascript" >
    $(function() {
    $("#Send").click(function() {

    var data_mensaje = $("#mensaje").val();
    var dataString = 'mensaje='+ data_mensaje;

    $("#flash").show();
    $("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');

    $.ajax({
    type: "POST",
    url: "ajax_insert.php",
    data: dataString,
    cache: false,
    success: function(html){
    arr = html.split('[*INTER*]');

    document.getElementById('display').style.display='';
    document.getElementById('alert_text').innerHTML='';
    document.getElementById('alert_text').innerHTML=arr[1];
    if(arr[0]==1)
    {
    document.getElementById('alert').className='alert alert-success';
    }
    else
    {
    document.getElementById('alert').className='alert alert-error';
    }
    document.getElementById('mensaje').value='';
    document.getElementById('mensaje').focus();
    $("#flash").hide();
    }
    });
    return false;
    });
    });
    </script>
    {/literal}

    <div id="flash"></div>

    <div id="display" style="display:none">
    <div id="alert" class="alert alert-success">
    <strong>Important</strong> <div id="alert_text"></div>
    </div>
    </div>

    <form method="post" name="form">
    <h3>What are you doing?</h3>
    <textarea cols="30" rows="2" name="mensaje" id="mensaje" maxlength="145">
    </textarea><br />
    <input id="Send" class="btn btn-primary" type="submit" value="Add" name="submit" />
    </form>
    Como vemos el formulario del final hace referencia al principio del paso 2 y todo lo que va entre las etiquetas de literal es la función javascript que ejecuta la comunicación con el controlador ajax que veremos a continuación.

  4. Creamos el controlador AJAX ajax_insert.php en la ruta work/ajax_insert.php con el siguiente contenido:
    <?php

    require('./configs/include.php');

    class 
    a_ajax_insert extends super_controller {

        public function 
    insert()
        {
            
    $mensaje = new mensaje($this->post); $mensaje->exceptions();
            
    $this->orm->connect();
            
    $this->orm->insert_data("normal",$mensaje);
            
    $this->orm->close();
            echo 
    "1[*INTER*]";
            echo 
    "Mensaje agregado satisfactoriamente";
        }
        
        public function 
    run()
        {
            try {
    $this->insert();}
            catch (
    Exception $e) {$this->error=1$this->msg_warning=$e->getMessage();}    
            if(
    $this->error==1){echo "2[*INTER*]"; echo $this->msg_warning;}
        }
    }

    $call = new a_ajax_insert();
    $call->run();

    ?>

  5. Finalmente ingresamos desde el navegador a la ruta localhost/work/insert_data.php y vemos el sistema funcionando.

Comments

Page 1 of 1


howard (Date: 2013-10-15 09:46:20)
hola como estas
Alerts To post comments, you must be a registered