Submit Form Dengan Ajax Menggunakan jQuery

Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

$(document).ready(function() {

$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});

$('#myForm').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
 $('#result').html(data);
}
})
return false;
});
})

Untuk mengimplementasikan Ajax, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

• type: jenis request yang dipakai, bisa ‘POST’ atau ‘GET’
• url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr('action')
• data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
• success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

//validasi
if (trim($_POST['nim']) == '') {
$error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
$error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
$error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya

if ($error) {
echo 'Error:
'.implode('
', $error);
} else {
/*
jika data mau dimasukkan ke database,
maka perintah SQL INSERT bisa ditulis di sini
*/

echo 'Form berhasil disubmit. Berikut ini data anda:';
echo '
';
foreach ($_POST as $k => $v) {
$data .= "$k : $v
";
}
echo $data;
}
die();


Dan anda bisa mendownload source code nya di sini: download