JSON (JavaScript Object Notation) itu seperti XML, karena keduanya mempunyai hirarki, mudah dibaca dan dapat di parsing menggunakan bahasa pemrograman. Walaupun demikian, JSON lebih cepat dan lebih ringan dibanding dengan XML. Berikut ini kita akan mencoba men-generate data JSON menggunakan PHP dan menampilkan nilainya menggunakan metode jQuery Ajax.
Metode 1 (menggunakan getJSON)
Metode ini me-load JSON encoded dari server menggunakan GET HTTP request. Berikut sample script untuk menampilkan nilai JSON dengan getJSON
$.getJSON("process.php", function(response) {
$('#result').html(response.satu);
$('#result2').html(response.dua);
$('#result3').html(response.tiga);
});
Metode 2 (menggunakan jQuery Ajax)
Seperti metode diatas, tapi disini kita dapat menambahkan options sebelum mengirimkan ajax request.
Mau Kuasai Metode jQuery Ajax untuk Menampilkan JSON Data Sampai Bisa Praktik Langsung?
Materi ini juga kami ajarkan langsung di kelas Edusoft Center, dibimbing mentor, sampai kamu bisa praktik nyata — bukan cuma baca teori.
Tanya Kursus via WhatsApp Lihat contoh project nyata dari siswa kami →
jQuery.ajax({
url: "process.php",
dataType:'json',
success:function(response)
{
$('#result').html(response.satu );
$('#result2').html(response.dua );
$('#result3').html(response.tiga );
}
});Script Lengkapnya
File process.php
<?php //List of strings in array
$myarry= array("teks 1","teks 2","teks 3","teks 4","teks 5","teks 6","teks 7");
//randomize strings
$randomize1 = array_rand($myarry);
$randomize2 = array_rand($myarry);
$randomize3 = array_rand($myarry);
//prepare output array
$myvals = array('satu'=>'1.'.$myarry[$randomize1],'dua'=>'2.'.$myarry[$randomize2],'tiga'=>'3.'.$myarry[$randomize3]);
//encode array with PHP json_encode and print output
echo json_encode($myvals);
?>File index.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery : Ajax display JSON data</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#method1").click(function() {
MethodOne();
});
$("#method2").click(function() {
MethodTwo();
});
});
//Method 1
function MethodTwo()
{
jQuery.ajax({
url: "process.php",
dataType:'json',
success:function(response)
{
$('#result').html(response.satu );
$('#result2').html(response.dua );
$('#result3').html(response.tiga);
}
});
}
//Method 2
function MethodOne()
{
$.getJSON("process.php", function(response) {
$('#result').html(response.satu);
$('#result2').html(response.dua);
$('#result3').html(response.tiga);
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>My Header</h1>
</div>
<div data-role="content">
<input id="method1" type="button" value="Json Method 1" />
<input id="method2" type="button" value="Json Method 2" />
<div id="result"></div>
<div id="result2"></div>
<div id="result3"></div>
</div>
<div data-role="footer" data-position="fixed">
<h1>My Footer</h1>
</div>
</div>
</body>
</html>Mau Kuasai Metode jQuery Ajax untuk Menampilkan JSON Data Sampai Bisa Praktik Langsung?
Materi ini juga kami ajarkan langsung di kelas Edusoft Center, dibimbing mentor, sampai kamu bisa praktik nyata — bukan cuma baca teori.
Tanya Kursus via WhatsApp Lihat contoh project nyata dari siswa kami →