CodeIgniter y JSON con jQuery

You can read the English version of this post in http://phpsblog.agustinvillalba.com/codeigniter-json-jquery/

En este post vamos a hablar sobre cómo recibir datos mediante JSON en CodeIgniter utilizando el framework de JavaScript jQuery. Pero antes aclaremos un poco qué es en realidad JSON y para qué sirve.

¿Qué es JSON y para qué sirve?

JSON viene del inglés JavaScript Object Notation, es decir es una notación de objetos en el lenguaje JavaScript. Es una forma de escribir las propiedades de los objetos en JavaScript para que éstos puedan ser enviados entre servidor y cliente y viceversa. Es un formato muy ligero dada su estructura interna bastante legible por los humanos y muy fácil de procesar por las máquinas. Si bien existe un debate entre qué es mejor, si XML o JSON para el envío y recepción de datos mediante AJAX, hay una gran comunidad de desarrolladores que apuestan por JSON como la tecnología de comunicación AJAX que predominará en el futuro, alegando entre otras cosas que al ser más ligero que XML las comunicacion entre cliente y servidor son más rápidas. Nosotros aquí no vamos a entrar en el debate, simplemente explicaremos cómo utilizarlo desde CodeIgniter con jQuery.

Realizando nuestra petición AJAX con JSON

Las peticiones AJAX con JSON en jQuery son parecidas a cualquier petición por AJAX que hacemos en CodeIgniter, sólo que además de indicarle que esperamos recibir los datos formateados como JSON, en CodeIgniter hemos de  utilizar la función $.post en lugar de la función $.ajax o $.getJSON, dado que CodeIgniter utiliza únicamente el método POST en sus conexiones con el cliente. El código de petición desde nuestro archivo probando_json.js sería el siguiente:

$.post("http://localhost/demo/controlador/funcion", {'nom1' : valor1, 'nom2' : valor2}, //nom1 es el nombre del parámetro que pasaremos algo similar a nom1=valor1&nom2=valor2
    function(data)
    {
        $.each(data.items, function(i,item){
            alert("valor: "+item.value+" nombre: "+item.name); //item.value e item.name porque
            //en el objeto data la información se organiza de la forma [{value:name},{value:name}...]
        });
    }, "json"
 );

En el código anterior hemos enviado por AJAX a la función «funcion» del controlador llamado «controlador» los parámetros nom1 y nom2 con los valores valor1 y valor2 respectivamente. En el lado del servidor PHP, nuestra funcion del controlador procesará los datos como lo necesitemos y llamará a una vista en la que codificaremos el resultado en forma de JSON. El código de nuestro controlador será el siguiente:

function funcion()
 {
   $data["datos"] = $this->ejemplo_model->get_ejemplos($this->input->post('nom1'),$this->input->post('nom2'));
//$data["datos"] contendrá un array del tipo Array("0" => Array("value" => value1, "name" => name1), "1" => Array("value" => value2, "name" => name2)...)
   $this->load->view('json/json_example_view',$data);
 }

El código de nuestro archivo de vista sería el siguiente:

<?php echo json_encode($datos); ?>

Hemos de remarcar y es muy importante que la función json_encode() únicamente está disponible a partir de la versión 5.2.0 PHP y a partir de la versión 5.3.0 esta función acepta un segundo parámetro de opciones.

Con esto ya podemos realizar y recibir peticiones desde nuestros archivos JavaScript dentro de nuestra aplicación hecha con CodeIgniter utilizando para ello el framework jQuery.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/codeigniter-json-jquery/