Pada website biasa ketika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refresh dimana document HTML akan di baca dari awal dan layar browser akan menjadi blank sesaat, karena pada saat itu browser sedang meminta/merequest data dari web server. Hal ini tentu membuat aplikasi website menjadi kurang interaktif dan responsif. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah yaitu kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Berikut ini akan di dijelaskan bagaimana cara membuat submit form dengan Ajax menggunakan jQuery Versi 1.2.3, kita 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: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Form</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(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;
 });
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
#result { background-color: #F0FFED; border: 1px solid #215800; padding: 10px; width: 400px; margin-bottom: 20px; }
</style>
</head>
<body>
<h4>AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
 <table>
  <tr>
   <td width="100">NIM</td>
   <td>
    <input name="nim" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td>Nama</td>
   <td>
    <input name="nama" size="40" type="text" />
   </td>
  </tr>
  <tr>
   <td>Tempat Lahir</td>
   <td>
    <input name="tempat_lahir" size="40" type="text" />
   </td>
  </tr>
  <tr>
   <td>Tanggal Lahir</td>

   <td>
    <input name="tgl_lahir" size="40" type="text" />
   </td>
  </tr>
  <tr>
   <td>Alamat</td>
   <td>
    <input name="alamat" size="60" type="text" />
   </td>
  </tr>
  <tr>
   <td>No. Telp</td>
   <td>
    <input name="no_telp" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td>No. HP</td>
   <td>
    <input name="no_hp" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td>E-mail</td>
   <td>
    <input name="email" id="email" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td></td>
   <td>
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />
   </td>
  </tr>
 </table>
</form>
</body>
</html>
Untuk mengimplementasikan Ajax, pada file form.html ini kita gunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan kita gunakan di antaranya adalah 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:
<?php
//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 (isset($error)) {
 echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
 /*
 jika data mau dimasukkan ke database,
 maka perintah SQL INSERT bisa ditulis di sini
 */
 
 $data = '';
 foreach ($_POST as $k => $v) {
  $data .= "$k : $v<br />";
 }
 echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
 echo '<br />';
 echo $data;
}
die();
?>
Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html