Read Display JSON Data using jQuery AJAX

by Vincy. Last modified on May 24th, 2022.

In this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. In PHP page we are reading an array of database records and convert them into JSON data using PHP json_encode().

Then, we are parsing JSON data and iterate object from jQuery function.

If you want to know more about JSON handling with PHP the linked article will be a comprehensive guide for you.

View DemoDownload

jQuery JSON Read Function

This function will be called on the click event of a reading button. It uses jQuery getJSON function to read a JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML.


The code is,

function readJSONData() {
		if(data) {
		var json_data;
		$.each(data, function(i,tutorial){
		json_data = '<tr>'+
			'<td valign="top">'+
			'<div class="feed_title">'+tutorial.title+'</div>'+
		} else {
		json_data += '<tr>'+
			'<td valign="top">No Tutorials Found</td>'+


Create JSON Data in PHP

This PHP code reads data from the database. And then, using json_encode() function, it converts database result array into JSON formatted string.

It will be sent as the response to the jQuery getJSON request. The Code is,

$db_handle = new DBController();
$query ="SELECT * FROM tutorial";
$result = $db_handle->runQuery($query);
print json_encode($result);

Database Table SQL

  `title` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `rating` tinyint(2) DEFAULT NULL,
  PRIMARY KEY (`id`)

View DemoDownload


Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this Article