Ajax in CodeIgniter 4

Download the latest version of CodeIgniter 4 and unzip source code to new folder named LearnCodeIgniter4WithRealApps

Cut index.php and htaccess files in public folder to root folder of project

Open index.php in root folder find to line 16 replace path to Paths.php file as below:

$pathsPath = realpath(FCPATH . '/app/Config/Paths.php');

Open App.php in app/Config folder find to line 39 remove index.php string in $indexPage variable as below:

public $indexPage = '';

Open App.php file in app/Config folder. Set value for $baseURL variable as below:

public $baseURL = 'http://localhost:8095/LearnCodeIgniter4WithRealApps/';

Create new PHP file named Demo.php in app/Controllers folder as below:

<?php

namespace App\Controllers;

class Demo extends BaseController
{
	public function __construct()
	{
		helper(['url']);
	}

	public function index()
	{
		return view('demo/index');
	}

	public function ajax1()
	{
		$this->response->setContentType('text/plain');
		echo 'Ajax 1';
	}

	public function ajax2()
	{
		$this->response->setContentType('text/plain');
		echo 'Ajax 2';
	}

	public function ajax3()
	{
		$this->response->setContentType('text/plain');
		$fullName = $this->request->getVar('fullName');
		echo 'Hello ' . $fullName;
	}

	public function ajax4()
	{
		$product = [
			'id' => 'p01',
			'name' => 'Name 1',
			'price' => 4.5
		];
		return $this->response->setJSON($product);
	}

	public function ajax5()
	{
		$products = [
			[
				'id' => 'p01',
				'name' => 'Name 1',
				'price' => 4.5
			],
			[
				'id' => 'p02',
				'name' => 'Name 2',
				'price' => 7.8
			],
			[
				'id' => 'p03',
				'name' => 'Name 3',
				'price' => 8.9
			]
		];
		return $this->response->setJSON($products);
	}
}

Create new folder named demo in views folder. In this folder, create new PHP file named index.php as below:

<html>

	<head>
		<title>Ajax in CodeIgniter 4</title>
		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#buttonDemo1').click(function() {
					$.ajax({
						type: 'GET',
						url: '<?= site_url('demo/ajax1') ?>',
						success: function(result) {
							$('#result1').html(result);
						}
					});
				});
	
				$('#buttonDemo2').click(function() {
					$.ajax({
						type: 'POST',
						url: '<?= site_url('demo/ajax2') ?>',
						success: function(result) {
							$('#result2').html(result);
						}
					});
				});
	
				$('#buttonDemo3').click(function() {
					var fullName = $('#textboxFullName').val();
					$.ajax({
						type: 'GET',
						data: {
							fullName: fullName
						},
						url: '<?= site_url('demo/ajax3') ?>',
						success: function(result) {
							$('#result3').html(result);
						}
					});
				});
	
				$('#buttonDemo4').click(function() {
					$.ajax({
						type: 'GET',
						url: '<?= site_url('demo/ajax4') ?>',
						success: function(product) {
							var result = 'Id: ' + product.id;
							result += '<br>Name: ' + product.name;
							result += '<br>Price: ' + product.price;
							$('#result4').html(result);
						}
					});
				});
	
				$('#buttonDemo5').click(function() {
					$.ajax({
						type: 'GET',
						url: '<?= site_url('demo/ajax5'); ?>',
						success: function(products) {
							var result = '';
							for (var i = 0; i < products.length; i++) {
								result += '<tr>';
								result += '<td>' + products[i].id + '</td>';
								result += '<td>' + products[i].name + '</td>';
								result += '<td>' + products[i].price + '</td>';
								result += '</tr>';
							}
							$('#tableProduct tbody').html(result);
						}
					});
				});
	
			});
		</script>
	</head>
	
	<body>
	
		<fieldset>
			<legend>Demo 1</legend>
			<input type="button" value="Demo 1" id="buttonDemo1">
			<br>
			<span id="result1"></span>
		</fieldset>
	
		<fieldset>
			<legend>Demo 2</legend>
			<input type="button" value="Demo 2" id="buttonDemo2">
			<br>
			<span id="result2"></span>
		</fieldset>
	
		<fieldset>
			<legend>Demo 3</legend>
			Full Name <input type="text" id="textboxFullName">
			<input type="button" value="Demo 3" id="buttonDemo3">
			<br>
			<span id="result3"></span>
		</fieldset>
	
		<fieldset>
			<legend>Demo 4</legend>
			<input type="button" value="Demo 4" id="buttonDemo4">
			<br>
			<span id="result4"></span>
		</fieldset>
	
		<fieldset>
			<legend>Demo 5</legend>
			<input type="button" value="Demo 5" id="buttonDemo5">
			<br>
			<table border="1" id="tableProduct">
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>Price</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</fieldset>
	
	</body>
	
</html>

Open Routes.php file in app/Config folder. Set default controller as below:

$routes->get('/', 'Demo::index');
$routes->get('/demo/ajax1', 'Demo::ajax1');
$routes->post('/demo/ajax2', 'Demo::ajax2');
$routes->get('/demo/ajax3', 'Demo::ajax3');
$routes->get('/demo/ajax4', 'Demo::ajax4');
$routes->get('/demo/ajax5', 'Demo::ajax5');

Access index action in Demo controller with following url: http://localhost:8095/LearnCodeIgniter4WithRealApps/demo/index

Output

Download and Install CodeIgniter 4

Set BASE URL

Create Controller

Create View

Define Routes

Structure of CodeIgniter 4 Project

Run Application