Cara Menampilkan Data JSON menggunakan jQuery AJAX

Menampilkan data json menggunakan jquery ajax ini sangat membantu kita dalam menampilkan sebuah data dari database. Ketika kita mengambil data dari database dan merubah menjadi data JSON menggunakan PHP json_encode (), maka data yang kita tampilkan responnya sangat cepat sekali. Kemudian, kita mem-parsing data JSON dan mengulangi objek dari fungsi jQuery.

Untuk yang ingin belajar tentang json, artikel ini saya buat untuk membantu Anda dalam mempelajari json.

Script HTML untuk Menampilkan Data Json

Script di bawah ini kita buat untuk menampilkan hasil dari data json, ketika data json berhasil dibuat maka HTML akan menampilkan data json tersebut ke layar tampilan.

An error has occurred. Please try again later.

jQuery JSON Read Function

Fungsi ini akan dipanggil pada event klik button raed. Fungsi Ini menggunakan getJSON jQuery untuk membaca data JSON yang dikembalikan dari halaman PHP. Iterates objek JSON array dan menambahkan hasil ke HTML,

function readJSONData() {
	$.getJSON("read_tutorial.php",function(data){	
		if(data) {
		var json_data;
		$('#read-data').hide();
		$('.demo-table').show();
		$.each(data, function(i,tutorial){
		json_data = '<tr>'+
			'<td valign="top">'+
			'<div class="feed_title">'+tutorial.title+'</div>'+
			'<div>'+tutorial.description+'</div>'+
			'</td>'+
			'</tr>';
		$(json_data).appendTo('#demo-table-content');
		});
		} else {
		json_data += '<tr>'+
			'<td valign="top">No Tutorials Found</td>'+
			'</tr>';
		$(json_data).appendTo('#demo-table-content');
		}		
	});	

}

function readJSONData() {

$.getJSON("read_tutorial.php",function(data){

if(data) {

var json_data;

$('#read-data').hide();

$('.demo-table').show();

$.each(data, function(i,tutorial){

json_data = '<tr>'+

'<td valign="top">'+

'<div class="feed_title">'+tutorial.title+'</div>'+

'<div>'+tutorial.description+'</div>'+

'</td>'+

'</tr>';

$(json_data).appendTo('#demo-table-content');

});

} else {

json_data += '<tr>'+

'<td valign="top">No Tutorials Found</td>'+

'</tr>';

$(json_data).appendTo('#demo-table-content');

}

});

}

Membuat Data JSON dalam PHP

Kode PHP ini membaca data dari database. Dan kemudian, menggunakan fungsi json_encode (), ia mengubah array hasil database menjadi string berformat JSON. Ini akan dikirim sebagai respons terhadap permintaan getJSON jQuery.

<?php
  require_once("dbcontroller.php");
  $db_handle = new DBController();
  $query ="SELECT * FROM tutorial";
  $result = $db_handle->runQuery($query);
  print json_encode($result);
?>

<?php

require_once("dbcontroller.php");

$db_handle = new DBController();

$query ="SELECT * FROM tutorial";

$result = $db_handle->runQuery($query);

print json_encode($result);

Oke lihat hasil dari codingan di atas,

Ketika user mengklik button di atas maka akan menghasilkan output seperti di bawah ini,

Oke itulah tadi pembahasan saya tentang Cara Menampilkan Data JSON menggunakan jQuery AJAX, semoga bermanfaat.

Cara Menampilkan Data JSON menggunakan jQuery AJAX

Facebook DUMET School

Konsultasi Gratis

Categories