Hallo teman-teman Dumet School, Kali ini saya akan membahas tenatng cara Menampilkan TodoList Dengan Menggunakan Ajax Jquery . AJAX adalah tentang memuat data di latar belakang dan menampilkannya di halaman web, tanpa memuat ulang seluruh halaman atau mereload halaman tersebut.

Nah untuk dapat Menampilkan TodoList Dengan Menggunakan Ajax Jquery kita harus buat terlebih dahulu struktur htmlnya sebagai berikut. Disini saya menggunakan bootstrap 4 untuk membantu membuat struktur htmlnya.

Jika sudah maka  kita buat script ajax jquerynya dan teman-teman bisa letakkan dibawah sebelum penutup tag body.

Nah disini saya sudah menyiapkan data array dengan nama variable todos untuk ditampilkan ke dalam struktur htmlnya. Kemudian saya buat fungsi show untuk menampilkan datanya dengan melakukan looping foreach dan kemudian di cetak dengan fungsi append jquery lalu saya jalankan fungsi show tersebut. Disini juga saya membuat kondisi jika data tersebut kosong makan akan tampil pesan bahwa data kosong. Dan jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Menampilkan TodoList Dengan Menggunakan Ajax Jquery

Demikian artikel tentang cara Menampilkan TodoList Dengan Menggunakan Ajax Jquery. Untuk pembahasan selanjutnya saya akan membahas cara menambahkan todolist dengan menggunakan ajax jquery dimana masih berhubungan dengan pembahasan ini.  Oke buat teman-teman yang penasaran bisa langsung mencobanya. Selamat mencoba.