CodeIgniter JQuery Ajax Request Example

CodeIgniter JQuery Ajax Request Example

Today, We want to share with you CodeIgniter JQuery Ajax Request Example.
In this post we will show you codeigniter ajax call controller function, hear for passing ajax data to codeigniter controller we will give you demo and example for implement.
In this post, we will learn about how to get data from database using ajax in codeigniter example with an example.

CodeIgniter JQuery Ajax Request - CodeIgniter JQuery Ajax Request Example
CodeIgniter JQuery Ajax Request Example

Step 1: Make Table

In first of all simple mysql database table I must have one create table with some fake data records. For this sample demo i make “products” table, therefor run bellow mysql query:

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `productname` varchar(255) NOT NULL,
  `information` varchar(255) NOT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=

Step 2: Create Route

application/config/routes.php

Also Read :  VueJS Arrays - tips, tricks and examples

//codeigniter ajax get data from database for route
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;


$route['ajax-request'] = 'ProductController/ajaxRequest';
$route['data-api-admin']['post'] = 'ProductController/ajaxRequestPost';

Step 3: Create Controller

application/controllers/ProductController.php

load->database();
   }

   public function ajaxRequest()
   {
       $data['data'] = $this->db->get("products")->result();
       $this->load->view('productlist', $data);
   }
   public function ajaxRequestPost()
   {
      $data = array(
            'productname' => $this->input->post('productname'),
            'information' => $this->input->post('information')
        );
      $this->db->insert('products', $data);
      echo 'Added successfully.';  
   }
}

Step 4: Make View File

In second Phase, I have to make HTML display table view file, If you installed latest version of the PHP based codeigniter then I need to make Like as a productlist.php on DOM HTML views folder and some put bellow source code on that file.application/views/productlist.php



    <title>PHP codeigniter ajax request - pakainfo.com</title>
    
    


<h2>Jquery AJAX post example with Php CodeIgniter framework</h2>
<div class="pakainfo container">
<div class="pakainfo row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>codeigniter ajax request - pakainfo.com</h2>
        </div>
    </div>
</div>
<div class="pakainfo row">
  <div class="col-lg-8">
    <strong>Name:</strong>
    
  </div>
  <div class="col-lg-8">
    <strong>Information:</strong>
    <textarea name="information" class="form-control"></textarea>
  </div>
  <div class="col-lg-8">
    <br />
    <button class="btn btn-success">Submit</button>
  </div>
</div>
<h1>CodeIgniter jQuery Ajax Post Data</h1>
<table class="table table-bordered" style="margin-top:20px">
  <thead>
      <tr>
          <th>Product Name</th>
          <th>Information</th>
      </tr>
  </thead>
  <tbody>
         
      <tr>
          <td>productname; ?></td>
          <td>information; ?></td>
      </tr>
   
  </tbody>

</table>
<h2>Example : JQuery Ajax Request Example in Codeigniter</h2>
</div>


    $("button").click(function(){
       var productname = $("input[name='productname']").val();
       var information = $("textarea[name='information']").val();
        $.ajax({
           url: '/data-api-admin',
           type: 'POST',
           data: {productname: productname, information: information},
           error: function() {
              alert('sorry!, Something is wrong');
           },
           success: function(data) {
                $("tbody").append("<tr><td>"+productname+"</td><td>"+information+"</td></tr>");
                alert("Product added successfully");  
           }
        });
    });



.

We hope you get an idea about How to send AJAX request in CodeIgniter
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

Also Read :  Login with LinkedIn using JavaScript SDK

We hope This Post can help you…….Good Luck!.

Leave a Reply

avatar
  Subscribe  
Notify of