Tagged: codeigniter ajax post data to controller

CodeIgniter JQuery Ajax Request Example 0

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 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

//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

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class ProductController extends CI_Controller {

   public function __construct() {
      parent::__construct();
      $this->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

<!DOCTYPE html>
<html>
<head>
    <title>PHP codeigniter ajax request - pakainfo.com</title>
    <link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<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>
    <input type="text" name="productname" class="form-control" placeholder="Name">
  </div>
  <div class="col-lg-8">
    <strong>Information:</strong>
    <textarea name="information" class="form-control" placeholder="Information"></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>
   <?php foreach ($data as $product) { ?>      
      <tr>
          <td><?php echo $product->productname; ?></td>
          <td><?php echo $product->information; ?></td>
      </tr>
   <?php } ?>
  </tbody>

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

<script type="text/javascript">
    $("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");  
           }
        });
    });
</script>
</body>
</html>
.

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.

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