fungsi Load () AJAX SEDERHANA ..


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 :

$ ( 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

< 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:

$ ( document ) . ready ( function ( ) {
$ ( ‘#menu a’ ) . click ( function ( ) {
var url = $ ( this ) . attr ( ‘href’ ) ; $ ( ‘#container’ ) . load ( url ) ; return false ;
} ) ;
} ) ;

Untuk lebih jelasnya silakan lihat demo:

Demo AJAX

fungsi Load () AJAX SEDERHANA ..

One thought on “fungsi Load () AJAX SEDERHANA ..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s