Ini yaitu metode dasar yang sering Anda gunakan untuk memuat sebagian halaman ke dalam kontainer yang sudah dipersiapkan menggunakan AJAX. Di sini Saya menggambarkan Anda akan memuat elemen #content dari halaman /p/sample-page.html ke dalam elemen #container:
$('button').on("click", function() { $('#container').load('/p/sample-page.html #content'); });Setelah tombol diklik, maka elemen #content dari halaman /p/sample-page.html akan termuat di dalam elemen #container. Ini yaitu kasus yang sederhana. Namun kasus ini akan menjadi lebih rumit ketika Anda ingin memuat beberapa bab dari halaman lain secara bersamaan dalam satu kali permintaan. Sebagai contoh, Anda ingin memuat bab posting, navigasi halaman dan komentar secara bersamaan dalam satu kali seruan HTTP ke dalam beberapa kontainer yang sudah dipersiapkan. Berikut ini yaitu cara yang tidak efisien:
$('button').on("click", function() { $('#container-1').load('http://blog.my_site.com/p/sample-page.html .post'); $('#container-2').load('http://blog.my_site.com/p/sample-page.html #nav'); $('#container-3').load('http://blog.my_site.com/p/sample-page.html #comments'); });Lebih Efisien: Gunakan $.get()
Jangan menggunakan jQuery .load() untuk memuat beberapa bab halaman sekaligus. Tapi gunakan jQuery $.get():
$('button').on("click", function() { $.get('http://blog.my_site.com/p/sample-page.html', function(data) { $('#container-1').html($(data).find('.post')); $('#container-2').html($(data).find('#nav')); $('#container-3').html($(data).find('#comments')); }); });Pada metode ini, Anda mengeklik sebuah tombol. Kemudian seruan akan terjadi. Setelah proses seruan berhasil dilakukan dan halaman yang diminta berhasil dipanggil, maka halaman tersebut tidak akan pribadi dimuat ke dalam area/kontainer yang sudah dipersiapkan, melainkan masih berada di dalam parameter data.
Pada kasus ini, parameter data sanggup disamakan sebagai keseluruhan HTML dari halaman http://blog.my_site.com/p/sample-page.html.
Dari parameter tersebut Anda sanggup menelusuri bagian-bagian halaman lainnya dengan cara menyeleksi elemen yang diinginkan di dalam $(data) untuk kemudian sanggup dimuat ke dalam kontainer yang diinginkan melalui jQuery manipulasi DOM ibarat .html(), .text(), .append() dan .prepend() atau yang lainnya.
Demo?
Jika Anda sedang menggunakan peramban Firefox, klik pada hidangan drop-down di pojok kiri atas. Pilih hidangan Web Developer kemudian klik sub hidangan Scratchpad (Atau cukup tekan tombol Shift+F4). Salin arahan di bawah ini kemudian tempelkan di dalam editor Scratchpad:
$('a').click(function() { $.get(this.href, function(data) { $('.post').html($(data).find('.post').html()); $('#blog-pager').html($(data).find('#blog-pager').html()); $('#comments').html($(data).find('#comments').html()); }, 'html'); return false; });Klik hidangan Execute dan pilih Run:
Setelah arahan ditempelkan, pilih hidangan Execute kemudian klik Run.
Sekarang klik salah satu tautan pada daftar entri/posting terkenal di sidebar blog ini dan tunggu beberapa ketika hingga bab dari halaman tersebut termuat. Jika berhasil, maka bab yang akan berganti isinya yaitu ada pada posting, navigasi halaman blog dan isi komentar (isi posting akan berubah, tautan navigasi halaman akan berubah dan isi komentar juga akan berubah).
Catatan dan Tambahan
jQuery .load() sanggup mendapatkan beberapa selektor sekaligus, kalau Anda tidak tahu:
// Memuat `#sidebar`, `#comments` dan `#blog-pager` // dari `http://abc_site.com/sample-page.html` ke dalam `#container` $('#container').load('http://abc_site.com/sample-page.html #comments,#sidebar,#blog-pager');Jika proses pemuatan menggunakan $.get() gagal (yang Saya alami yaitu muncul pesan error TypeError: n.innerHTML is undefined), cobalah untuk menggunakan pola ini:
$.get('http://abc_site.com/sample-page.html', {}, function(data) { // Lakukan sesuatu dengan `$(data)` }, 'html');