Bab 15: AJAX Dasar jQuery – Mengambil Data dari Server Tanpa Reload Halaman

Bab 15: AJAX Dasar jQuery – Mengambil Data dari Server Tanpa Reload Halaman

Setelah mempelajari Looping dengan .each(), bab berikutnya adalah AJAX Dasar jQuery. AJAX memungkinkan website untuk mengambil atau mengirim data ke server tanpa me-refresh halaman, sehingga pengalaman pengguna menjadi lebih cepat dan interaktif.

Fitur ini sangat berguna untuk:

  • Memuat konten secara dinamis
  • Form submit tanpa reload
  • Menampilkan data dari server seperti API, database, atau file JSON
  • Membuat aplikasi web modern yang responsif

1. Struktur Dasar AJAX jQuery

Method AJAX dasar di jQuery:

$.ajax({
  url: "file.php",       // URL file atau endpoint server
  method: "GET",         // GET atau POST
  data: { key: "value" }, // data yang dikirim
  success: function(response){
    // aksi jika berhasil
  },
  error: function(xhr, status, error){
    // aksi jika terjadi error
  }
});

2. Mengambil Data dengan .load()

Method .load() merupakan cara paling sederhana untuk mengambil konten dari server.

Contoh:

$("#btnLoad").click(function(){
  $("#result").load("data.txt");
});
  • Konten dari data.txt akan muncul di elemen dengan id result.

3. Mengambil Data dengan .get()

$.get("data.txt", function(data){
  $("#result").html(data);
});
  • Method .get() melakukan GET request dan mengambil data.

4. Mengirim Data dengan .post()

$.post("proses.php", { nama: "Andi", umur: 25 }, function(response){
  $("#result").html(response);
});
  • Mengirim data ke server menggunakan POST request.
  • Response dari server akan ditampilkan di elemen #result.

5. Contoh Lengkap AJAX Dasar jQuery

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Dasar jQuery</title>
</head>
<body>

<button id="btnLoad">Load Data</button>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // Mengambil data dari file txt
  $("#btnLoad").click(function(){
    $.ajax({
      url: "data.txt",
      method: "GET",
      success: function(response){
        $("#result").html(response);
      },
      error: function(xhr, status, error){
        alert("Terjadi kesalahan: " + error);
      }
    });
  });
</script>

</body>
</html>

Catatan: Pastikan data.txt ada di folder yang sama dengan file HTML.

6. Tips dan Kesalahan Umum

  • ❌ Salah URL atau path file → request gagal
  • ❌ Tidak menempatkan jQuery di dalam $(document).ready()
  • ❌ Tidak menangani error → pengguna tidak tahu jika request gagal
  • ❌ Mengirim data POST tapi server hanya menerima GET

Kesimpulan

Pada Bab 15: AJAX Dasar jQuery, Anda telah mempelajari:

  • Mengambil data dari server tanpa reload menggunakan .load(), .get(), dan .ajax()
  • Mengirim data ke server dengan .post()
  • Menangani response dan error

AJAX adalah fondasi penting untuk membuat website modern yang cepat, interaktif, dan responsif. Bab berikutnya akan membahas AJAX Lanjutan dengan JSON dan API.

Related Posts