Dalam mengembangkan aplikasi berbasis web pasti ada unsur penginputan data. Pada saat input data kita akan mengisi form sesuai data-data yang dibutuhkan. Setelah selesai memasukkan data, langkah berikutnya adalak klik kirim atau submit. Jika koneksi jaringan bagus maka akan tersubmit. Bagaimana jika saat submit jaringan putus ?
Jika pada saat submit jaringan putus maka akan muncul halaman error, dan pada saat koneksi jaringan baik kita harus menginput ulang data-data tersebut. Jika sering terjadi maka ini akan sangat mengesalkan, bagaimana mengatasinya ?
Salah satu mengatasi masalah ini adalah melakukan POST dengan menggunakan Ajax. Kita juga akan menggunakan library jQuery untuk memudahkan kita membuat program.
Misal kita membuat form index.html dengan tampilan seperti berikut ini:
Source code untuk form misal seperti ini:
<form id=”formku” action=”proses.php”>
Nama: <input type=”text” name=”nama” id=”namaid”/> <br/>
Kota: <input type=”text” name=”kota” id=”kotaid”/> <br/>
<button type=”submit”>Kirim</button>
</form>
Kemudian untuk pemrosesan pada proses.php isinya misalnya:
<?php
$nama=$_POST[‘nama’];
$kota=$_POST[‘kota’];
echo “Nama:$nama <br/>
Kota:$kota “;
?>
Kemudian kita tambahkan coding berikut pada index.html
<strong>Response dari server:</strong>
<div id=”tampilan_hasil”>
</div>
<br/><strong>Statusnya:</strong>
<div id=”status_hasil”>
</div>
<script>
//onsubmit dari formku
$(“#formku”).submit(function( event ) {
event.preventDefault();
urlku = $(“#formku”).attr( “action” );
//dapatkan nilai dari form
nilai_nama = $(“#namaid”).val();
nilai_kota = $(“#kotaid”).val();
dataku = {nama:nilai_nama,kota:nilai_kota};
$.post(urlku,dataku,fungsiku);
});
function fungsiku(data,textStatus)
{
$(“#tampilan_hasil”).html(data);
$(“#status_hasil”).html(textStatus);
}
</script>
Penjelasan source code di atas adalah
a. Menambahkan div untuk keperluan tampilan
b. Menambahkan onSubmit
c. Mengambil nilai dari masing-masing field dan dimasukkan ke variabel dataku
d. Melakukan action POST dimana output data dan textStatus dikirimkan ke function fungsiku
e. Function fungsiku menangkap data dan menampilkan dalam div
Tampilan dapat dilihat pada http://aris.proweb.asia/ajaxpost/index.html dengan contoh seperti gambar berikut ini:
Informasi lebih lanjut silahkan mengunjungi:
1. http://api.jquery.com/jquery.post/ .
2. http://api.jquery.com/Types/#PlainObject .
3. http://api.jquery.com/submit/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.