Halo teman-teman semuanya, di seri ke-10 ini, kita akan membahas salah satu fitur paling powerful dari jQuery, yaitu Ajax.
Dengan Ajax, kita bisa berkomunikasi dengan server (mengambil atau mengirim data) tanpa harus me-reload halaman. Cocok banget buat bikin aplikasi web yang interaktif dan responsif.
Apa Itu Ajax?
Ajax (Asynchronous JavaScript and XML) adalah teknik untuk melakukan permintaan HTTP ke server secara asinkron, artinya kita bisa mengirim dan menerima data tanpa menyegarkan ulang (referesh) halaman. jQuery menyederhanakan penggunaan Ajax dengan method seperti .get(), .post(), dan .ajax().
1. Contoh Penggunaan $.get()
$.get("data.txt", function(response) {
$("#hasil").text(response);
});
data.txt adalah file yang ingin diambilresponse adalah isi dari file tersebut- Data ditampilkan ke elemen dengan id
hasil
2. Contoh Penggunaan $.post()
$.post("proses.php", { nama: "Budi" }, function(response) {
$("#hasil").html(response);
});
proses.php adalah file server-side (misalnya pakai PHP) yang menerima data{ nama: "Budi" } adalah data yang dikirim ke serverresponse berisi balasan dari server
3. Contoh Mengirim Form Dengan Ajax
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Ajax jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="formKontak">
<input type="text" name="nama" id="nama" placeholder="Nama"><br><br>
<input type="email" name="email" id="email" placeholder="Email"><br><br>
<button type="submit">Kirim</button>
</form>
<div id="hasil" style="margin-top:20px;"></div>
<script>
$(document).ready(function() {
$("#formKontak").submit(function(e) {
e.preventDefault();
let nama = $("#nama").val();
let email = $("#email").val();
$.post("proses.php", { nama: nama, email: email }, function(data) {
$("#hasil").html("<p>" + data + "</p>");
});
});
});
</script>
</body>
</html>
Catatan: File proses.php di sisi server bisa berisi kode sederhana yang menerima dan memproses data POST.
4. Menggunakan $.ajax()
Untuk konfigurasi yang lebih fleksibel:
$.ajax({
url: "proses.php",
method: "POST",
data: { nama: "Andi", email: "andi@mail.com" },
success: function(respon) {
console.log(respon);
},
error: function(err) {
console.log("Terjadi kesalahan:", err);
}
});
Kesimpulan
Dengan jQuery Ajax, kita bisa membuat aplikasi web yang dinamis tanpa perlu reload halaman. Mulai dari menampilkan data, mengirim form, hingga komunikasi dengan API, semuanya bisa dilakukan dengan mudah.
Pada artikel berikutnya, kita semua akan belajar tentang jQuery Plugin, yaitu bagaimana cara menggunakan sebuah plugin di dalam jQuery.
Terima Kasih