Beranda > Ajax > Script Ajax Sederhana menggunakan jQuery

Script Ajax Sederhana menggunakan jQuery

AJAX adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.

Terimakasih kepada framework jQuery, proses development ajax bisa menjadi lebih mudah.

Salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), yang memiliki 3 buah parameter sbb:

load(url, params, callback)

keterangan:

  • url (String): URL dari file html yang akan di load
  • params (Object): Data yang akan dikirimkan ke server (optional)
  • callback (Function): Fungsi yang akan dijalankan ketika data berhasil di load (optional)

Contoh penggunaan pada sebuah link:

1
2
3
4
5
$(document).ready(function() {
	$('#link').click(function() {
		$('#container').load('content.php');
	});
});

keterangan:

  • link adalah id dari link/tombol yang akan diklik
  • container adalah id dari element yg akan memuat isi dari script content.php

Contoh penggunaan yang lebih dinamis (dengan mengambil nilai dari attribute href) :

Misalnya ada sekumpulan link di dalam sebuah div

1
2
3
4
5
6
7
8
<div id="menu">
	<ul>
		<li><a href="content.php?id=1">Menu 1</a></li>
		<li><a href="content.php?id=2">Menu 2</a></li>
		<li><a href="content.php?id=3">Menu 3</a></li>
		<li><a href="content.php?id=4">Menu 4</a></li>
	</ul>
</div>

Tanpa penambahan script, link-link tersebut akan diproses sebagai link biasa.

Supaya semua link-link tersebut bisa diproses dengan ajax, tambahkan script sbb:

1
2
3
4
5
6
7
$(document).ready(function() {
	$('#menu a').click(function() {
		var url = $(this).attr('href');
		$('#container').load(url);
		return false;
	});
});
Kategori:Ajax
  1. almazy
    Februari 3, 2011 pukul 7:29 am

    nice

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: