Metode load() jQuery ajax
Contoh
Ganti teks elemen div menggunakan permintaan AJAX:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Anda dapat menemukan lebih banyak contoh TIY di bagian bawah halaman.
definisi dan penggunaan
metode load() mengambil data dari server melalui permintaan AJAX dan menempatkan data yang diembalikan ke elemen yang ditentukan.
Keterangan:tetap ada yang dinamai load jQuery peristiwametode. Yang mana yang dipanggil, tergantung parameter.
sintaksis
load(url,data,fungsi(response,status,xhr))
| parameter | deskripsi |
|---|---|
| url | Tentukan URL mana permintaan akan dikirim. |
| data | Pilihan. Tetapkan data yang akan dikirim ke server bersama permintaan. |
| function(response,status,xhr) |
Pilihan. Tetapkan fungsi yang akan dijalankan saat permintaan selesai. Parameter ekstra:
|
Pengertian detil
Metode ini adalah metode paling sederhana untuk mendapatkan data dari server. Ini hampir sama dengan $.get(url, data, success), beda hanya itu bukan fungsi global, dan memiliki callback implisit. Saat mendeteksi tanggap balik yang sukses (misalnya, saat textStatus adalah "success" atau "notmodified"), .load() akan menyetel konten HTML elemen yang diatur menjadi data yang diembalikan. Ini berarti sebagian besar penggunaan metode ini akan sangat sederhana:
$("#result").load("ajax/test.html");
Jika disediakan fungsi callback, maka fungsi ini akan dijalankan setelah post-processing dilakukan:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
Dalam dua contoh di atas, jika dokumen saat ini tidak mengandung ID "result", maka metode .load() tidak akan dijalankan.
Jika data yang disediakan adalah objek, maka digunakan metode POST; jika tidak, digunakan metode GET.
Muat bagian halaman
Metode .load(), berbeda dengan $.get(), memungkinkan kami untuk menentukan bagian dokumen jarak jauh yang akan disisipkan. Ini disiapkan melalui sintaks url parameter khusus. Jika string ini mengandung satu atau lebih spasi, string yang mengikuti spasi pertama adalah pemilihan jQuery yang menentukan konten yang diambil.
Kami dapat mengubah contoh di atas, sehingga dapat digunakan bagian beberapa dokumen yang diambil:
$("#result").load("ajax/test.html #container");
Jika menjalankan metode ini, maka akan mengambil konten ajax/test.html, namun kemudian, jQuery akan memproses dokumen yang diembalikan untuk mencari elemen yang memiliki ID kontainer. Elemen ini, bersama dengan kontennya, akan disisipkan ke dalam elemen yang memiliki ID hasil, bagian sisanya dokumen yang diambil akan diabaikan.
jQuery menggunakan properti .innerHTML browser untuk memecahkan dokumen yang diambil, dan mengirimkannya ke dokumen saat ini. Pada proses ini, browser sering menghilangkan elemen seperti <html>, <title>, atau <head> elemen. Akibatnya, elemen yang diambil melalui .load() mungkin tidak sama dengan dokumen yang diambil langsung oleh browser.
Keterangan:Karena batasan keamanan browser, sebagian besar permintaan "Ajax" mengikuti strategi sumber yang sama; permintaan tidak dapat sukses mengambil data dari domain, subdomain, atau protokol yang berbeda.
Beberapa contoh lainnya
Contoh 1
Muat konten file feeds.html
$("#feeds").load("feeds.html");
Contoh 2
Dikarenakan contoh di atas, tetapi mengirimkan parameter tambahan dalam bentuk POST dan menampilkan informasi saat sukses:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("25 entri terakhir di feed telah dimuat");
});
Contoh 3
Muat bagian navigasi sisi artikel ke dalam daftar tak berurutan:
Kode HTML:
<b>Tautan jQuery:</b> <ul id="links"></ul>
Kode jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Beberapa contoh TIY lainnya
- Membuat permintaan AJAX dan mengirimkan data melalui permintaan ini
- Bagaimana menggunakan parameter data untuk mengirimkan data melalui permintaan AJAX (contoh ini dijelaskan dalam tutorial AJAX).
- Membuat permintaan AJAX dan menggunakan fungsi balik (callback)
- Bagaimana menggunakan parameter function untuk menangani hasil data dari permintaan AJAX.
- Membuat permintaan AJAX dengan kesalahan
- Bagaimana menggunakan parameter function untuk menangani kesalahan dalam permintaan AJAX (menggunakan parameter XMLHttpRequest).
