CodeIgniter and JSON with jQuery

In this post, we are going to talk about how to receive data in CodeIgniter via JSON, using for that the JavaScript framework jQuery. But before that, we need to clarify a bit what is JSON and what is it used for.

What is JSON? What is it used for?

JSON stands for JavaScript Object Notation. So, it is a way of writing the properties of objects in JavaScript so that they can be sent between client and server and vice versa. This format is very light due to its internal structure, which is quite human readable, and it is very easy to process by machines. While there is a debate about which format is better, if XML or JSON, for sending and receiving data via AJAX, there is a large community of developers who bet on JSON as the AJAX communication technology that will prevail in the future, alleging among other things that being lighter than XML the communication between client and server is faster. Here, we are not going to enter in this debate, we are simply going to explain how to use JSON in CodeIgniter with jQuery.

Making our AJAX request with JSON

In jQuery, AJAX requests made by JSON are similar to any other AJAX request that we make in CodeIgniter, but besides that we have to indicate to the script that we expect to receive the data in JSON format, we also have to use the jQuery function $.post, instead of $.ajax or $.getJSON. This is because CodeIgniter only uses the POST method when it receives AJAX connections from the client. The code for requesting data from our file “testing_json.js” looks like:

$.post("http://localhost/demo/controller/function", {'name1' : value1, 'name2' : value2}, //name1 is the name of the parameter that send, something similar to name1=val1&name2=val2
    function(data)
    {
        $.each(data.items, function(i,item){
            alert("value: "+item.value+" name: "+item.name); //item.value e item.name because in the data object the information is set in this way: [{value:name},{value:name}...]
        });
    }, "json"
 );

In the above code, we have sent by AJAX the parameters name1 and name2, with values ​​value1 and value2 respectively, to the “function” of the controller called “controller”. In PHP server side, the function in our controller will process the data as we need and it will call a view in which we will code the result as JSON. Our controller code is as follows:

function funcion()
 {
   $data["my_data"] = $this->example_model->get_examples($this->input->post('name1'),$this->input->post('name2'));
   //$data["my_data"] will contain an array like Array("0" => Array("value" => value1, "name" => name1), "1" => Array("value" => value2, "name" => name2)...)
   $this->load->view('json/json_example_view',$data);
 }

The code in our view file “json/json_example_view.php” would be simply like this:

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

We must emphasize, and it is important, that the function json_encode() is only available in PHP since the version 5.2.0, and since the version 5.3.0 this function accepts a second parameter for options.

With this you can send and receive requests from our JavaScript files within our application made with CodeIgniter by using the jQuery framework.

1 thought on “CodeIgniter and JSON with jQuery

  • I’d been looking for information like this, in fact I happened thinking I was impossible to use jquery to get and send data in codeigniter.

    Would you made me a favor, please? Guide me steps to make the connection. I have separated .js file to make it. Could you orient me? $(document).ready(function(){
    Should my $.post come in here?
    });

Leave a Reply

Your email address will not be published. Required fields are marked *