Cara Membuat Script AJAX Submit No Refresh Page

Sampai 2 hari ke depan, saya akan ngebut untuk membuat siakad (sistem akademik) perwalian untuk di kampus tercinta. Gara-gara kurikulum baru, otomatis semua mata kuliah berubah dan ada beberapa yang dikonversikan. Mau gak mau, sistem perwaliannya juga berubah karena di semester depan sudah mulai ada penjurusan. Nah, di sistem perwalian yang baru ini saya akan menerapkan konsep full AJAX dengan bantuan jQuery. “Kenapa pakai AJAX?”. Yaw biar servernya tidak jeblok pas diakses oleh ratusan mahasiswa yang lagi KRS’an bareng. Pada postingan kali ini, saya akan menjelaskan sedikit bagaimana penerapan konsep load halaman dan submit data dari form dengan menggunakan AJAX, tentunya tanpa memanggil keseluruhan halaman dari awal lagi. Hitung-hitung nambah postingan tentang AJAX di blog kesayangan saya ini :D.

1. Di jQuery, terdapat fungsi load() untuk memanggil halaman. Dimana fungsi load() ini mempunyai 3 parameter, yaitu :

load(url, params, callback)

Keterangan :

• url (String): Alamat url dari file yang akan di load
• params (Object): Data yang akan dikirimkan ke server
• callback (Function): Fungsi yang akan dipanggil ketika data berhasil di ambil dari server

2. Dan penggunaannya dalam sebuah halaman html, kira-kira seperti di bawah ini :

1	<script type="text/javascript" src="js/jquery.js"></script>

2	<script type="text/javascript">

3	$(function() {

4	$('#loading').ajaxStart(function(){

5	$(this).fadeIn();

6	}).ajaxStop(function(){

7	$(this).fadeOut();

8

});

9

10	$('#menu a').click(function() {

11	var url = $(this).attr('href');

12	$('#content').load(url);

13	return false;

14

});

15

});

16

</script>

• #menu a adalah id dari link yang akan memanggil halaman sesuai URL ketika di klik
• #content adalah sebuah kanvas dimana halaman yang dipanggil akan ditempatkan
• var url = $(this).attr(‘href’) akan memberikan informasi bahwa ketika tag html dengan atribut href di klik, maka halaman akan dipanggil dan ditempatkan di tag #content.

3. Syntax html untuk memanggil halamannya, seperti di bawah ini :

1	<div id="menu">

2	<a href="isi.php?modul=home"><div id="bg-menu">Beranda</div></a>

3	<a href="isi.php?modul=about"><div id="bg-menu">Tentang Saya</div></a>

4	<a href="isi.php?modul=guestbook"><div id="bg-menu">Guestbook</div></a>

5	<a href="isi.php?modul=hubungi"><div id="bg-menu">Hubungi Saya</div></a>

6

</div>

4. Agar terlihat lebih keren, jangan lupa untuk menambahkan animasi loading dengan syntax d bawah ini :

1	<div id="loading" style="display:none"><img src="images/loading.gif" /><br />Mohon tunggu. Data sedang dimuat.....</div>

Langkah-langkah di atas, bertujuan untuk memanggil halaman dengan fungsi load() yang dimiliki oleh jQuery. “Lantas bagaimana caranya mengirimkan data dari form/submit form dengan jQuery?”. Prinsipnya sama saja dengan cara di atas, hanya saja sekarang kita akan memanfaatkan fungsi post() yang sudah disediakan oleh jQuery. Berikut penerapannya :

1. Karena data yang di kirimkan melalui form, maka semua kolom inputan harus valid. Disini juga saya menambahkan fungsi dari jQuery untuk melakukan validasi :

1	<script type="text/javascript" src="js/jquery.validate.min.js"></script>

2	<script type="text/javascript">

3	$(document).ready(function(){

4	$("#formkirim").validate({

5	debug: false,

6

rules: {

7	nama: "required",

8	pesan: "required",

9

email: {

10	required: true,

11	email: true

12

}

13

},

14	messages: {

15	nama: " * Masih kosong",

16	email: " * Tidak Valid",

17	pesan: " * Masih Kosong",

18

},

19	submitHandler: function(form) {

20	$.post('isi.php?modul=kirim', $("#formkirim").serialize(),function(data) {

21	$('#content').html(data);

22

});

23

}

24

});

25

});

26

</script>

2. Jangan lupa untuk membuat form yang akan mengirimkan data-data yang diinputkan user :

view source

print?

1	<form method="post" id="formkirim" name="formkirim" action="">

2	<table width="100%" cellpadding="5">

3	<tr><td valign="top">Nama</td><td><input type="text" name="nama" class="input"size="50"></td></tr>

4	<tr><td valign="top">Email</td><td><input type="text" name="email" class="input"size="50"></td></tr>

5	<tr><td valign="top">Pesan</td><td><textarea name="pesan" class="input" rows="8"cols="50"></textarea></td></tr>

6	<tr><td></td><td><input type="submit" value="Kirim Pesan" class="tombol"></td></tr>

7	</table></form>

8	<div id="content" style="display:none"></div>

3. Sekarang kita buat halaman prosesnya. Nah, karena saya menggunakan sistem modul untuk menghemat penggunaan file, maka kita sisipkan beberapa baris syntax php untuk menampilkan hasil yang dikirmkan oleh user :

1	else if($_GET[modul]=='kirim')

2

{

3	echo "Pesan anda Terkirim...!!!<br>";

4	echo "Nama : ".$_POST[nama]."<br>";

5	echo "Email : ".$_POST[email]."<br>";

6	echo "Pesan : ".$_POST[pesan]."<br>";

7

}

Mau tau hasil jadinya? Dibawah postingan ini sudah saya sediakan link demo dan link untuk men-download file jadinya. Semoga bisa membantu rekan-rekan yang sedang belajar AJAX dengan jQuery.

Happy Blogging and Keep Coding

Artikel Terkait: