Welcome to Abdul Malik Ikhsan's Blog

jQuery – Using JSON for data transfers

Posted in Javascript, tips and tricks, Tutorial PHP by samsonasik on April 14, 2010

JSON (dilafalkan “Jason”),  adalah singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek).

Penggunaan JSON pada pertukaran transfer data, terutama ketika kita menggunakan AJAX, sangatlah bermanfaat, tapi tentu saja alangkah lebih baiknya, jika selain memanfaatkan JSON secara murni, kita juga tahu tools-tools yang bisa digunakan agar pemanfaatan JSON bisa lebih cepat. Salah satu Tools yang bisa digunakan adalah Javascript Library yang tentu sudah tidak asing lagi bagi kita semua, yaitu jQuery.

Ok, saya akan memberikan satu contoh sederhana pemanfaatan JSON menggunakan jQuery javascript library dan PHP.
Pertama, kita siapkan file2 yang dibutuhkan, seperti gambar berikut:

Keterangan :
1. frmjson.html     : file view kita.
2. getjson.php       : serverside script untuk menangkap data yang ditransfer.
3. jquery-1.4.2.js : Javascript library-nya.
————
Now, let’s coding :
1. frmjson.html

<!-- frmjson.html -->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 //closure button berid = "setter" diklik...
 $("#setter").click(function(){
 $.post("getjson.php",{
 nama : $("#nama").val(),
 alamat : $("#alamat").val()
 }, function(data){
 //jika response telah berhasil... (set label...)
 $("#lblgetattr").html(data.nama+" beralamat di "+data.alamat);
 },"json");
 });
 });
</script>
Nama : <input type="text" id="nama"> <br>
Alamat : <input type="text" id="alamat"> <br>
<input type="button" value="SetAtribute" id="setter">
<br>
Atribut yang sudah terset adalah : <label id="lblgetattr"></label>

2. getjson.php :

<?php
 $data['nama'] =  strtoupper($_POST['nama']);
 $data['alamat'] = $_POST['alamat'];

 echo json_encode($data);

3. jQuery-1.4.2.js (Bisa didownload di situs http://jquery.com )

Sebelum button dengan id =”setter” diklik, maka akan tampil halaman seperti ini :

Dari gambar di atas, kita belum melihat respon apa2 karena button dengan id =”setter” belum kita klik, jika kita isi nama dan alamat, kemudian kita klik button dengan id=”setter” tersebut, maka akan tampil seperti berikut :

Gambar di atas menunjukkkan dari sisi background, javascript mengirimkan request ke getjson.php , kemudian response tersebut dikirim ke browser, dan ditampilkan di view browser.

Asik kan yach ? welcome to RIA world 🙂
———————–

Referensi :
http://id.wikipedia.org/wiki/JSON
http://json.org/
http://jquery.com

Tagged with: ,

9 Responses

Subscribe to comments with RSS.

  1. winyata senjaya said, on May 10, 2010 at 5:24 pm

    waeeiizzz…makin jago aja jQuery nyaa… 🙂
    udah jadi master jQuery..

  2. samsonasik said, on May 11, 2010 at 3:01 am

    preeet…, si mas jay menghina euy 😛

  3. winyata senjaya said, on May 11, 2010 at 9:44 am

    knp yach setiap saya muji orang selalu dibilang menghinaaa…
    aneh bener, hhhmmffpphh…

  4. samsonasik said, on May 11, 2010 at 9:48 am

    soalnya mas jay lebih jago, xi.xi.xi.., peace ah 😀

  5. winyata senjaya said, on July 1, 2010 at 8:17 am

    cuma sering mencoba aja san, jago mah enggak…^_^

  6. zalaz said, on July 2, 2011 at 11:44 am

    knapa muncul nya undefined utk yg alamatnya ?? padahal sy copy paste dri web

    Atribut yang sudah terset adalah : asdfg beralamat di undefined

  7. samsonasik said, on July 2, 2011 at 2:57 pm

    coba lihat di firebug, dan coba ketik ulang, jangan copy paste 🙂

  8. Yance said, on August 12, 2013 at 1:58 pm

    tologn dong tiap kali saya buka YM pasti muncul pesan JSON IS UNDEFIENED…
    knapa ya… kirim ke email saya yaa caranyaa. yance_qts@yahoo.co.id


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: