by Pernahkah Anda menekan tombol “suka” dan angkanya bertambah tanpa halaman berkedip memuat ulang? Itulah AJAX (Asynchronous JavaScript and XML) — teknik mengirim dan mengambil data dari server di latar belakang. jQuery membuat AJAX sangat mudah ditulis. Artikel ini membahas cara menggunakan AJAX jQuery secara lengkap.
Prasyarat: Memuat jQuery
Pastikan jQuery sudah dimuat di halaman Anda, misalnya:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Mengambil Data dengan $.get()
Cara paling ringkas mengambil data dari server:
<script>
$.get("data.php", function(hasil) {
$("#output").html(hasil);
});
</script>
Kode ini memanggil data.php, lalu memasukkan hasilnya ke elemen #output — semua tanpa memuat ulang halaman.
Mengirim Data dengan $.post()
<script>
$.post("simpan.php", { nama: "Budi", umur: 25 }, function(respon) {
console.log("Sukses:", respon);
});
</script>
Kontrol Penuh dengan $.ajax()
Untuk kebutuhan lengkap termasuk penanganan error, gunakan $.ajax():
<script>
$.ajax({
url: "proses.php",
method: "POST",
data: { id: 5 },
dataType: "json",
success: function(res) {
$("#nama").text(res.nama);
},
error: function() {
alert("Terjadi kesalahan saat mengambil data.");
}
});
</script>
Opsi dataType: "json" membuat jQuery otomatis mengubah respon JSON menjadi objek yang siap dipakai.
Contoh Kasus: Live Search (Pencarian Langsung)
<input type="text" id="cari" placeholder="Ketik untuk mencari...">
<div id="hasil"></div>
<script>
$("#cari").on("keyup", function() {
const kata = $(this).val();
$.get("cari.php", { q: kata }, function(data) {
$("#hasil").html(data);
});
});
</script>
Setiap kali pengguna mengetik, data dikirim ke server dan hasil pencarian langsung tampil — pengalaman yang mulus dan cepat.
Contoh Kasus: Kirim Form via AJAX
<script>
$("#formku").submit(function(e) {
e.preventDefault(); // cegah reload
$.post("simpan.php", $(this).serialize(), function(res) {
$("#pesan").text("Data tersimpan!");
});
});
</script>
Metode serialize() mengemas seluruh isi form menjadi satu, sangat praktis dikombinasikan dengan AJAX.
Sisi Server (PHP) Contoh Sederhana
<?php
header("Content-Type: application/json");
$id = (int) $_POST["id"];
// ... ambil data dari database ...
echo json_encode(["nama" => "Budi", "umur" => 25]);
?>
Kesalahan Umum
- jQuery belum dimuat — muncul error “$ is not defined”.
- Lupa
preventDefault()saat submit form — halaman tetap reload. - Path file salah — cek URL di tab Network (F12) untuk melihat status request.
- Tidak validasi di server — data AJAX tetap harus divalidasi ulang di PHP demi keamanan.
Kesimpulan
Anda telah belajar cara menggunakan AJAX jQuery memakai $.get(), $.post(), dan $.ajax() untuk membuat halaman yang responsif tanpa reload. Teknik ini adalah dasar aplikasi web modern seperti live search dan form dinamis. Selalu ingat memvalidasi ulang data di sisi server.
