Metode getJSON() adalah salah satu metode pada AJAX jQuery yang berfungsi untuk mendapatkan data JSON yang menggunakan AJAX request HTTP GET. Sama dengan metode lainnya Metode getJSON() juga mempunyai parameter yang berisi url, data dan success. Saya akan mencoba membagi tutorial tentang Cara Menggunakan Metode getJSON() pada AJAX jQuery
Sebelum kita mulai mencoba metode getJSON pada sebuah kasus saya akan menerangkan sedikit tentang Apa itu JSON?. JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemrograman Javascript. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dan lain-lain. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.
Pada tutorial kali ini saya akan mencoba membagi Cara Menggunakan Metode getJSON() pada AJAX jQuery dan di implementasikan pada kasus pengambilan data murid.
- Langkah Pertama
Teman-teman buat file index.htmlnya terlebih dahulu. Di sini saya menggunakan framework bootstrap
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <p>Klik tombol ambil data di bawah ini untuk mengambil data murid:</p> <div id = "stage" class="bg-success"> Data Murid </div> <input type = "button" id = "driver" value = "Ambil Data" /> </div> </div> </div> </body> </html>Langkah Ke-dua
Buat folder form untuk menyimpan file JSON-nya, lalu buat file data.json sebagai berikut
{
"nama": "Zara Ali",
"jenis_kelamin": "Wanita",
"umur" : "21",
"paket_kursus": "Web Master Pro"
}
- Langkah Ke-tiga
Keitikan Script di bawah ini dan jangan lupa ketikan diatas tag penutup dari body untuk mengambil data murid dari data.json yang telah kita buat tadi.
- Langkah Terakhir
Teman-teman buka file index.html di browser teman-teman
Lalu klik tombol “ambil data” untuk menampilkan data murid
Bagaiman teman-teman cukup mudahkan menggunakan metode getJSON pada AJAX jQuery.
Sekian tutorial kali ini tentang Cara Menggunakan Metode getJSON() pada AJAX jQuery. Semoga artikel ini bermanfaat bagi teman-teman.
The post Cara Menggunakan Metode getJSON() pada AJAX jQuery appeared first on Kursus Website Terbaik.