Get Data from Database using AJAX in Codeigniter 4

Step 1: Create a controller

Create a controller named ‘AjaxController.php’ in the ‘app/Controllers’ directory.

query(‘SELECT * FROM users’);
$result = $query->getResult();

return $this->response->setJSON($result);

Step 2: Create a view

Create a view file named ‘ajax_view.php’ in the ‘app/Views’ directory.

AJAX in CodeIgniter 4

AJAX in CodeIgniter 4

Step 3: Create a route

Create a route in the ‘app/Config/Routes.php’ file.

$routes->get(‘ajax’, ‘AjaxController::index’);
$routes->get(‘ajax/getData’, ‘AjaxController::getData’);

Step 4: Run the application

Now, run the application in the browser using the URL ‘http://localhost/ajax’. You will see the output as shown below.

AJAX in CodeIgniter 4
Get Data

To get data from database using ajax jquery in codeIgniter 4; In this tutorial guide, you will learn how to fetch or get data from database using jquery ajax in codeIgniter 4 projects.

Codeigniter 4 Get Data from Database Using Ajax jQuery

Using the following steps, you can fetch or get data from database in codeigniter 4 and display in table using jQuery Ajax:

  • Step 1: Setup Codeigniter Project
  • Step 2: Basic Configurations
  • Step 3: Create a Database and Tables
  • Step 4: Setup Database Credentials
  • Step 5: Create Model and Controller
  • Step 6: Create a Views
  • Step 7: Start Development server

Step 1: Setup Codeigniter Project

In this step, you need to download the latest version of Codeigniter 4, Go to this link and Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next step, you need to set some basic configuration on the app/config/app.php file, so let’s visit application/config/config.php and open this file on the text editor.

Then Set Base URL like this

public $baseURL = 'http://localhost:8080';
public $baseURL = 'http://localhost/demo/';

Step 3: Create a Database and Tables

Once you have setup basic configuration. Now, you need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo.

So, you can use the below SQL query for creating a table in your database.

    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    email varchar(255) NOT NULL COMMENT 'Email Address',
    PRIMARY KEY (id)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
INSERT INTO `users` (`id`, `name`, `email`) VALUES
(1, 'John Doe', '[email protected]'),
(2, 'Vanya Hargreeves', '[email protected]'),
(3, 'Luther Hargreeves', '[email protected]'),
(4, 'Diego Hargreeves', '[email protected]'),
(5, 'Klaus Hargreeves', '[email protected]'),
(6, 'Ben Hargreeves', '[email protected]'),
(7, 'The Handler', '[email protected]');

Step 4: Setup Database Credentials

Once you have created database for your ci projects. Now, you need to connect to your created database with ci projects.

So, you need to visit app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, Then set up database credentials in this file like below.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'demo',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,

Step 5: Create Model and Controller

In this steps, you need to create one model and controller file in your ci projects.

So go to app/Models/ and create here one model. And then you need to create one model name userModel.php and update the following code into your userModel.php file:

namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
    protected $table = 'users';
    protected $allowedFields = ['name', 'email'];
    public function getUsers($id = false) {
      if($id === false) {
        return $this->findAll();
      } else {
          return $this->getWhere(['id' => $id]);

Next, Go to app/Controllers and create a controller name AjaxController.php. In this controller, you need to create some method/function. As follows:

namespace App\Controllers; 
use CodeIgniter\Controller;
use App\Models\UserModel;
class AjaxController extends BaseController {
    public function index(){
		$data['name'] = 'Mac Shine';
		$data['content'] = 'list/index';
        return view('templates/main', $data);
    public function user_table(){
        $model = new UserModel();
		$data['users'] = $model->getUsers();
        echo view('list/user_table', $data);

Next, Open app/Config/Routes.php file and define the following route inside it:

$routes->get('/', 'AjaxController::index');
$routes->match(['get', 'post'], 'AjaxController/user_table', 'AjaxController::user_table');

Step 6: Create a Views

Now you need to create app/Views/templates/main.php file and add the following code into it:

<!doctype html>
<html lang="en">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <title>Codeigniter AJAX Fetch Data from Database Example -</title>
  <?php echo view($content); ?>

Once you have created main.php file. Now you need to create list/index.php, go to the application/views/list folder and create the index.php file. and update the following HTML into your files:

<div id="userTable"> </div>
    function reloadTable() {
        url: "<?php echo site_url(); ?>/AjaxController/user_table",
        beforeSend: function (f) {
          $('#userTable').html('Load Table ...');
        success: function (data) {

Then, create app/Views/list/user_table.php file and insert the given below code in it.

<table class="table">
      <?php foreach($users as $data) {  ?>
        <td><?php echo $data['id']; ?></td>
        <td><?php echo $data['name']; ?></td>
        <td><?php echo $data['email']; ?></td>
      <?php } ?>

Step 7: Start Development server

Now, open your terminal or cmd and execute the following command into it to start the development server:

php spark serve

To start the development server, Go to the browser and hit below the URL.



That’s all; In this tutorial guide, you have learned how to fetch or get data from a database and display in table using jquery Ajax in codeIgniter 4 projects.

Recommended Codeigniter Posts

If you have any questions or thoughts to share, use the comment form below to reach us.


Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.


Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00