6CS028 Workshop - Ajax

Main Page >> Advanced Web Development >> Workbook >> Week 04 - Ajax

Important: this is a CodeIgniter example, but it is easily adaptable to Laravel.

The JSON data

First, let's create a page that will output JSON data from our existing "news" database table, like this:

• https://mi-linux.wlv.ac.uk/~in9352/ci4/public/index.php/ajax/get/hello

Create a new controller called Ajax.php, with the following code:

<?php

namespace App\Controllers;

use App\Models\NewsModel;

class Ajax extends BaseController
{
	public function get($slug = null)
	{
		$model = model(NewsModel::class);
		$data = $model->getNews($slug);

		print(json_encode($data));
	}
	
}

Note: it is very similar to our previous news controller. The function above selects a given news items from our model (as per before), but converts the data to JSON and simply prints it to the browser.

The Ajax call

Next, we need to write some JavaScript that will "fetch" data from the URL above.

In your existing overview.php view, make the following changes:

Add a container paragraph (maybe right at the top for now), that will be used to display the data coming back from the request:

<p id="ajaxArticle"></p>

Next, add a button for each article, that calls the JavaScript code, passing the current article's slug:

<p><button onclick="getData('<?= esc($news_item['slug'], 'url') ?>')">View article via Ajax</button></p>

Note: the above should be inside the foreach loop, right after the existing "view article" link.

Finally, add the JavaScript block at the bottom of the file:

<script>
	function getData(slug) {
		
		// Fetch data
		fetch('https://mi-linux.wlv.ac.uk/~in9352/ci4/public/ajax/get/' + slug)
			
		  // Convert response string to json object
		  .then(response => response.json())
		  .then(response => {

			// Copy one element of response to our HTML paragraph
			document.getElementById("ajaxArticle").innerHTML = response.title + ": " + response.text;
		  })
		  .catch(err => {
			
			// Display errors in console
			console.log(err);
		});
	}
</script>

Notes:

• you will have to change the URL in the fetch statement, to match yours.
• the document.getElementById("ajaxArticle").innerHTML allows you to write to the HTML element specified earlier. You could have more than one!
• you might eventually wish to move this to an external JS file, as it's more efficient and tidy.

Here is mine:

• https://mi-linux.wlv.ac.uk/~in9352/ci4/public/index.php/newsajax
• Try pressing the various "View article via Ajax" buttons, and see how the article is displayed at the top.
• Look in the developer tools / network tab, and note how each button triggers an HTTP request behind the scenes! Look at their preview.