Hai teman-teman semuanya, kembali lagi pada tutorial dumet school, kita telah membahas banyak tentang banyak method yang ada pada jquery, kali ini kita akan belajar ajax pada jquery, nah apa itu ajax? Ajax atau kepanjangan dari (Asynchronous JavaScript And XML) adalah teknik baru didunia website yang berfungsi
untuk membuat sebuah website lebih kaya dibandingkan dengan aplikasi website biasa, maksud dari halaman website lebih kaya ialah dengan ajax dapat memungkinkan sebuah halaman web memperbarui data dari server yang ditampilkannya tanpa harus melakukan refresh, sehingga halaman terlihat lebih responsif, Dengan ajax kita tidak perlu mereload ketika ada data baru yang ingin ditampilkan, jadi website yang ditampilkan akan lebih ceppat, oke kita masuk pada pembahasan pada tutorial kali ini kita akan mencoba cara load file html dengan jquery ajax.
silahakan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS. Ajax</title> </head> <body> <div class="bg-danger" id="demo"></div> <button id="btn">Ambil Data</button> </body> </html> |
Script diatas saya membuat sebuah tombol dan sebuah area tampil dengan id demo, dimana area tampil ini yang nanti akan menampilkan hasilnya, sekarang teman-teman coba buat 1 file html lagi dengan nama title.html dan ketikan script berikut ini didalamnya:
|
1 |
<h3>Hallo teman-teman semuanya Selamt datang di DUMET SCHOOL</h3> |
Nah nanti pada kasusnya kita akan meload file title.html kedalam file sebelumnya yang saya buat, oke kita masuk pada scriptting jquerya ajaxnya, nah silahakan tema-teman buat sebua script berikut ini pada bagian index.html.
|
1 2 3 4 5 6 7 8 9 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#demo").load("title.html") }) }) </script> |
saya membuat sebuah fungsi apabila id btn di klik maka akan menjalankan fungsi load ajax yang ada pada jquery dan menampiilkannya pada area di demo, jika sudah silahakan teman-teman save dan jalankan pada browser
sebelum tombol di klik maka hasilnya akan seperti berikut ini:
dan jika teman-teman klik tombolnya maka hasilnya akan seperti berikut ini:
Gimana teman-teman cukup mudah bukan, untuk tutorial kali ini tentang cara load file html dengan jquery ajax saya rasa cukup sampai sini dulu, semoga bermanfaat,\
Terima kasih