Tutorial Ajax Part 2 : Mengirim Data Form Dengan AJAX
Setelah sebelumnya kita mempelajari bagaimana cara load file menggunakan AJAX sekarang kita akan membahas fungsi AJAX yang paling sering digunakan, yaitu mengirimkan data form dengan AJAX, tujuanya agar ketika client menginputkan data tidak perlu lama - lama menunggu respon dari server. Untuk menggunakan fungsi $.ajax(). Fungsi ini dapat mengirim data dengan method GET maupun POST. Format penulisan fungsi ini yaitu sebagai berikut
$.ajax();Pada format di atas, Options ini diisi dengan pengaturan AJAX yang terdiri dari key dan value yang dipisahkan dengan tanda titik dua (:). Adapun masing - masing pengaturan dipisahkan dengan tanda koma (,). Option yang dapat digunakan dapat dilihat pada penjelasan di bawah :
- Option : url , Value : *.php , Keterangan : File yang akan memproses data ke server
- Option : data , Keterangan : Data yang dikirimkan ke server misalnya "tampil=halaman1".
- Option : dataType , Value : HTML, JSON, XML , Keterangan : Format data yang diinginkan sebagai respon dari server
- Option : cache , Value : true, false , Keterangan : Jika diisi true, data yang di-request akan di-cache oleh browser
- Option : success , Value : function (){ .. } , Keterangan : Fungsi yang akan dijalankan ketika request telah sukses dijalankan
- Option : error , Value : function (){ .. } , Keterangan : Fungsi yang akan dijalankan ketika request gagal dijalankan
Untuk mengirim data form dengan AJAX, option type sebaiknya diisi POST. Selain itu, ketika mengirim data dari form kita tidak perlu menyebtukan data satu persatu, cukup menggunakan fungsi .serialize() untuk mengirim semua data pada form.
Singkatnya, mengirim data form dengan AJAX sama-sama menggunakan fungsi $.ajax(), tetapi nilai option type diisi POST, dan option data diisi $('#id_form').serialize(). Untuk contohnya, kita buat file form.php dengan skrip sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>BAB 2.3 | Mengirim Data Form dengan AJAX </title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#myForm').submit(function(){
$.ajax({
url: 'aksi.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
alert(data);
$('[name=nis]').val("");
$('[name=nama]').val("");
$('.kontent').append('Berhasil Meload');
},
error: function() {
alert("Tidak dapat memproses data !");
}
});
return false;
});
});
</script>
</head>
<body style="font-family: lato">
<h3>Masukkan Data Siswa !</h3>
<form id="myForm">
<table>
<tr>
<td>NIS : </td>
<td><input type="text" name="nis" placeholder="Masukkan NIS"></td>
</tr>
<tr>
<td>Nama : </td>
<td><input type="text" name="nama" placeholder="Masukkan Nama"></td>
</tr>
<td></td>
<td><button>Kirim</button></td>
</table>
</form>
<div class="kontent"></div>
</body>
</html>Maksud dari skrip di atas, yaitu ketika form dengan id #myform disubmit, semua data form akan dikirim ke file aksi.php. Ketika ada respon dari file aksi.php, data akan ditampilkan pada alert dan data form dikosongkan. Dibagian akhir harus ditambah perintah return false agar ketika form submit browser tidak melakukan refresh.
Selanjutnya uat file aksi.php yang akan memproses data form dengan skrip berikut
<?php
echo "Anda siswa dengan NIS ".$_POST[nis]." dan memiliki nama ".$_POST[nama];
?>
Ketika dijalankan pada browser maka akan tampil hasil seperti berikut
KESIMPULAN
Yaa itulah bagaimana cara mengirim data form dengan AJAX yaitu kita bisa menggunaan type POST dan kita juga diberi kemudahan tanpa perlu menyebutka form satu persatu bisa menggunakan fungsi serialize(). Jika ada pertanyaan silahkan d
Tidak ada komentar :
Posting Komentar