Hallo teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas mengenai cara membuat ajax menggunakan jquery.
mungkin diantara teman-teman disini ada yang belum mengenal apa itu ajax nahh kebetulan di blog ini juga sudah membahas mengenai ajax tapi menggunakan javascript silahkan kunjungi link ini mengenal ajax javascript
Pembuatan ajax pada jquery ini sangat lebih mudah dibandingkan dengan javascript, dimana pengkodean yang lebih sedikit, dan juga mudah untuk di pahami oleh pengguna baru
oke langsung saja kita masuk ke dalam cara membuat ajax menggunakan jquery
langkah 1. siapkan library jquery
nahh untuk teman-teman yang belum menginstall jquery di halaman web nya silahkan kunjungi link ini install jquery untuk lebih memahami cara install jquery, atau copy source code dibawah ini dan pastekan di dalam taq head html teman-teman semuanya
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>Langkah 2. siapkan file dengan nama index.html
selanjutnya teman-teman silahkan siapkan file dengan index.html di web server teman-teman semuanya (cth : di dalam folder htdocs ) dan copy source code di bawah ini :
index.html
Langkah 3.Siapkan file dengan nama data.txt
nahh selanjutnya teman-teman siapkan file dengan nama data.txt yang dimana ini nantinya kita jadikan untuk data yang akan dibaca oleh ajax jquerynya, untuk mempermudah teman-teman semuanya silahkan copy text dibawah ini dan pastekan ke dalam file data.txt teman-teman semuanya
data.txt
Langkah 4. Buatkan script Ajax Jquerynya
selanjutnya teman-teman buatkan script ajax jquerynya dengan copy source code dibawah ini dan pastekan di dalam taq body html teman-teman semuanya
Keterangan :
$.ajax({ => berfungsi untuk memanggil objek ajax pada jquery
url : => isikan dengan url file yang akan anda ambil dan sesuaikan dengan lokasi file anda kebetulan disitu saya menyimpan file data.txt di dalam folder data jadi url nya menjadi data/data.txt
type : =>nah disini anda bisa memasukkan type pengirimannya bisa menggunakan GET,POST dan PUT
success:function(dataHasil){ => jika data berhasil di load atau ditemukan maka jalankan function ini
$('.hasil h1').html(dataHasil) => jika function berjalan maka isikan datahasil ke dalam class hasil dan didalam taq h1
}
});
Langkah 5. Jalankan File index.html
nahh selanjutnya jika teman-teman sudah menjalankan source code diatas dan menenkan tombol tampilkan data.txt maka tampilanya akan seperti ini
sekian dan terimakasih.....
Baca Juga : Belajar Jquery untuk Pemula
0 Komentar