Codeigniter Ajax Call Request Controller Function

CodeIgniter Ajax Call Request Controller Function is very simple tutorial, I am assuming that you already know how to use Ajax and call functions. In this article you'll learn how to use Ajax calls within your CodeIgniter controller functions. Here i have used jquery function to post and get the data response from the controller.

Live Demo Download

Follow the step by step ajax request call functions. Performing GET and POST requests using Ajax json datatype it will make easy to load the data, I would suggest to follow JSON format controller response.

Syntax for ajax POST JSON

$.post('url',{'data': data-fields},
function(data){ 
    <!-- Success function -->
});

The above Syntax data that is sent to the url page like form post action. and after performing some task it will return data to view page without refreshing.

Syntax for ajax GET JSON

$.getJSON('ajax_form_list.php?q='+value, function (data) {
            <!--success function  -->
});

GET JSON load the encode data from the server using HTTP request like form get method.

How to post form data controller function

Create one simple HTML form element based on your design needs or follow the below live demo file structure. the live demo registration form i have posted the values to the ajax_post_form() functions.

Controller

Create sample controller name called welcome.php

<?php 
class Welcome extends CI_Controller {

    public function ajax_form ()
    {
        $this->load->view('ajax_html_form');
    }

    public function ajax_post_form ()
    {
       $user_data = array(
        'name'=> $this->input->post('username'),
        'email'=> $this->input->post('email'),
        'password'=> $this->input->post('password')
        );
       //Write your insert code and success message
       echo json_encode($user_data); 
    }

}

View

Create below structure html form design.(ajax_html_form.php)

<h3>Simple Registration Form</h3>
<form name="reg_form" id="reg_form">   
    <p>Name : <input type="text" name="username"></p>
    <p>Email : <input type="text" name="email"></p>
    <p>password : <input type="password" name="password"></p>
    <p> <input id="click_form" value="submit" type="button" ></p>
</form>
<div class="ajax_success"></div> 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {   
   $('#click_form').click(function(){
    var url = "<?php echo site_url('welcome/ajax_post_form') ?>";
    var data = $("#reg_form").serialize();
    $.post(url,data, function(data) {      
       $('.ajax_success').html('Your name  :'+data.name + '<br> Your Email : '+data.email);
    }, "json");
  });
});
</script>sd

$("#reg_form").serialize() - Serialize form attribute data send to the server request.
<?php echo site_url(); ?> - Returns base_url + index_page + uri_string.
$('.ajax_success').html('data.name') - Displaying the json response data.
json_encode() - convert array value to JSON value.

Menu Link

20 June, 2016