Sebelum memulai pembahasan penggunaan JQuery dengan JSON, kita akan mengenalkan apa itu JSON ? Sebenarnya saya sendiri juga baru belajar tentang JSON itu sendiri,
Jadi kalo ada yang kurang bisa diperbaiki ya hehe :D .
Oke langsung saja pembahasannya, JSON atau yang memiliki kepanjangan JavaScript Object Nation merupakan sebuah cara atau format dalam pertukaran data secara ringan, yang artinya JSON mudah digunakan oleh manusia dan mudah diterjemahkan oleh komputer itu sendiri. Namun ada yang perlu kita ketahui, JavaScript belum tentu termasuk kedalam JSON dan JSON belum tentu dikatakan sebagai JavaScript.
Kenapa demikian ? Pastinya, hanya beberapa JavaScript yang dapat dikatakan JSON dan hanya beberapa saja JSON dapat dikatakan sebagai JavaScript.
Coba baca sendiri deh disini :
http://timelessrepo.com/json-isnt-a-javascript-subset
Lalu, bagaimana cara penggunaannya pada JQuery ? Mari kita lanjutkan.
Dalam penggunaan data JSON di artikel ini tidak lepas pula perananan AJAX dalam penggunaannya.
jQuery.getJSON()
sintaks : $.getJSON( url, [data], [callback] )
Bagaimana cara kerjanya ?
Sebagai contoh, salin script di bawah ini dan simpan dengan nama
ilkom.json
{
"nama": "Rifki Izdihar Oktavian",
"umur" : "20",
"gender": "Cowok"
}
Setelah disimpan, kita akan memulai dengan penggunaan JQuery. Dalam penggunaan JQuery ini kita bisa menggunakan 2 cara yaitu dengan cara offline dan online. Namun, pada artikel ini kita akan menggunakan secara online karena pastinya kalo mau akses artikel ini pasti ada koneksi internet kan ? :D .
Selanjutnya, salin script dibawah ini dan simpan dengan nama misalnya belajar.php / belajar.html tergantung mana yang kalian suka yang penting ini hubungannya sama pemrograman Web, tetapi saya lebih ke php sih, hehe
<html>
<head>
<title>Contoh aja</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('ilkom.json', function(jd) {
$('#stage').html('<p> Nama: ' + jd.nama+ '</p>');
$('#stage').append('<p>Umur : ' + jd.umur+ '</p>');
$('#stage').append('<p> Gender: ' + jd.gender+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Coba kalian klik tombolnya</p>
<div id = "stage">
Masih kosong kan ? Coba klik dibawah ini
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Nah, setelah berhasil disimpan coba kalian jalankan. Jangan lupa nyalakan Localhost kalo kalian pakai php
Mudah saja kan ? Jadi, pada dasarnya JSON digunakan dalam membaca data lalu menampilkan data tersebut.
Untuk lebih detailnya tentang penggunaan JSON secara mendalam, bisa dicari-cari sendiri di pencarian kalian hehe. Sekian, terima kasih.
