CodeIgniter y JSON con jQuery

Publicado: 30/01/2010 en AJAX, CodeIgniter, desarrollo, JavaScript, jQuery, JSON, php, Programación
Etiquetas:, , , , , , ,

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/

Anuncios
comentarios
  1. Jorge dice:

    Mil gracias, es justamente lo que estaba buscando. =)

  2. Andrew dice:

    Muy bueno! Muchas gracias por tomarte las molestias 🙂

    Un saludo

  3. quiquedcode dice:

    I was looking for this !!
    Thanks a lot

  4. alvaro dice:

    Gracias, claro y conciso, justo lo que estaba buscando 🙂

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