Menggunakan .ajax

Siapkan HTML

Tambahkan elemen HTML di halaman Anda, misalnya:


<button id="loadData">Muat Data</button>
<div id="result"></div>

Sisipkan jQuery

Pastikan Anda sudah menyisipkan pustaka jQuery di halaman Anda, seperti:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Buat Fungsi $.ajax()

Tambahkan kode jQuery untuk melakukan permintaan AJAX ketika tombol diklik:

$(document).ready(function() {
    $("#loadData").click(function() {
        $.ajax({
            url: "contoh.json", // Ganti dengan URL yang sesuai
            method: "GET",      // Atur metode HTTP yang sesuai
            dataType: "json",   // Atur tipe data yang diharapkan
            success: function(data) {
                // Kode yang dijalankan ketika permintaan berhasil
                $("#result").html("Data yang dimuat: " + data.nama);
            },
            error: function() {
                // Kode yang dijalankan ketika permintaan gagal
                $("#result").html("Gagal memuat data.");
            }
        });
    });
});

Pastikan untuk mengganti url dengan URL sumber data yang sesuai.

Jalankan Aplikasi

Buka halaman Anda dan klik tombol "Muat Data" untuk memicu permintaan AJAX. Hasilnya akan ditampilkan di dalam elemen dengan ID "result".

Itulah cara sederhana menggunakan $.ajax() dalam jQuery untuk melakukan permintaan AJAX dan menampilkan hasilnya di halaman web Anda.

Semoga tutorial ini bermanfaat!
Silakan ikuti langkah-langkah di atas untuk membuat dan menguji permintaan AJAX dalam jQuery. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

PREVIOUS
NEXT