En esta entrada vamos a hacer un ejemplo sencillo de una llamada ajax con jQuery y Codeigniter para conocer la forma en que puedes integrar las llamadas asíncronas a tu proyecto.
Comencemos con lo básico de siempre en una instalación de Codeigniter, es decir:
- Configurar el base_url
- Quitar el index.php de la url
- Agregar el htaccess para el paso anterior.
1. Vamos a application/config/config.php:
<?php $config['base_url'] = 'https://localhost/codeigniterAjax/'; ?>
2. Aquí mismo en config.php:
<?php //$config['index_page'] = 'index.php'; $config['index_page'] = ''; //Quedará así ?>
3. Finalmente agregamos el htaccess que se coloca en la raíz del proyecto:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond $1 !^(index.php|resources|robots.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
Ahora vamos a application/config/routes.php para cambiar el controlador por default:
<?php $route['default_controller'] = 'inicio'; ?>
Ahora en la carpeta controllers creamos el archivo Inicio.php que contiene lo siguiente:
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Inicio extends CI_Controller { public function index() { $datos['titulo'] = 'Codeigniter con ajax'; $this->load->view('headfoot/header', $datos); $this->load->view('body/principal'); $this->load->view('headfoot/footer'); } }
Hay que recordar que yo hago la separación de las vistas para manipularlas mejor pero si usas solo una vista con una estructura de HTML es también válido.
Veamos cada vista, views/headfoot/header.php es donde se carga el css:
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> <!DOCTYPE html> <html lang="es"> <head> <title><? echo $titulo?></title> <meta charset="utf-8"> <meta name="description" content="Codeigniter con ajax"> <meta name="keywords" content="Aprender a usar Codeigniter con ajax y jquery"> <meta name="author" content="Hugui Dugui"> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css" > </head> <body>
En views/body/principal.php vamos a crear un formulario con un campo input y botón submit, el cual cada que lo presionemos pintaremos en la columna derecha lo que se escribió en en el campo, esta vista tiene:
<div class="container"> <div class="row"> <div class="col-md-6" > <input id="input-valor" type="text" name="input-valor"> <button id="boton-ajax" class="btn btn-success"> Traer con ajax </button> </div> <div id="respuesta-ajax" class="col-md-6"> <div>Hola</div> </div> </div> </div>
views/headfoot/footer.php es donde se carga jquery y tu archivo de funciones:
<!-- Aquí cargamos jquery y el archivos de nuestras funciones --> <script src="<?php echo base_url();?>assets/js/jquery-2.1.1.min.js"></script> <script src="<?php echo base_url();?>assets/js/functions.js"></script> </body> </html>
Vamos a crear un controlador que se dedique solo a las llamadas ajax, lo llamaremos Ajax.php:
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Ajax extends CI_Controller { public function crearBoton() { if (!$this->input->is_ajax_request()) { redirect('404'); } else { $respuestas = array(); $input = $this->input->post("input_valor"); $respuestas['html'] = "<div>Hola " . $input . "</div>"; echo json_encode($respuestas); exit(); } } }
Ahora el archivo en assets/js/functions.js contiene la llamada a este controlador y el que obtiene la respuesta para pintarla en la columna derecha, este archivo contiene:
$(document).ready(function(){ var base_url = 'https://localhost/codeigniterAjax/'; $("#boton-ajax").click(function(){ var input_valor = $("#input-valor").val(); $.ajax({ type: 'POST', url: base_url + 'ajax/crearBoton', data: {input_valor: input_valor }, dataType: "json", success: function(resp){ $("#respuesta-ajax").append(resp.html); } }); }); }); // document ready
Listo, con estos archivos podemos ir a probar y se verá lo siguiente:
No olvides que puedes descargar el zip de esta entrada con el proyecto completo Codeigniter con Ajax. Espero que me quieras compartir tus avances y/o dudas en el grupo de facebook del curso.
Si quieres puedes escribirme a ringhugos@gmail.com o al whatsapp para cualquier comentario o duda que tengas sobre este tutorial.
