Pada kesempatan kali ini saya akan menjelaskan cara menampilkan data json ke dalam list dengan ajax javascript. Perlu teman-teman ketahui sebelumnya, untuk mengambil data dari suatu file baik itu file.json, file .php ataupun file .xml bisa menggunakan method get di ajax, namun pada penjelasan disini saya menggunakan kode javascript. Bagi kalian yang belum mengetahui cara penggunaan untuk menggunakan method tersebut dengan javascript, hal utama yang perlu kalian tuliskan dan gunakan adalah fungsi XMLHttpRequest(). dimana hal tersebut adalah hal utama untuk penggunaannya.

Sebenarnya bukan cuma untuk method get saja, selain dari method get tersebut pun kalian harus menggunakan fungsi XMLHttpRequest() terlebih dahulu. Karena XMLHttpRequest digunakan untuk mengirimkan permintaan seperti HTTP dan HTTPS ke server web untuk memuat respon data server kembali ke skrip. Untuk membuatnya kalian bisa mengikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

  • Kalian buat terlebih dahulu satu buah file json dengan nama mahasiswa.json
  • Isikan data di file .json tersebut seperti data berikut :

  • Jika sudah save terlebvih dahulu file tersebut
  • Buat lagi satu buah file php di dalam folder project web server local kalian dengan nama index.php
  • Ketikan kode seperti berikut :

  • Simpan kedua file tersebut saling sejajar didalam folder project web server local kalian, pada contoh disini saya menggunakan web server local apache xampp.
  • Jika sudah lihat hasilnya dibrowser dengan mengetikan localhost/namafolderprojectkalian
  • Jika teman-teman mengikuti tahapan yang saya berikan dengan benar, maka akan tampil hasilnya seperti gambar berikut :

Cara Menampilkan Data Json Ke Dalam List Dengan Ajax JavaScript

Sampai disini penjelasan saya mengenai cara menampilkan data json ke dalam list dengan ajax javascript, semoga bermanfaat.