Cara Menggunakan AJAX pada Form

Cara Menggunakan Ajax pada Form – Hallo programmer… Kali ini saya kembali meluangkan waktu untuk menulis dan membagi pengalaman yang saya punya tentang cara menggunakan Ajax, mudah – mudahan ini bermanfaat bagi yang membutuhkan.

Saya sendiri yakin, seorang website programmer pasti tidak asing lagi mendengar kata Ajax, iya kan? AJAX (Asynchronous JavaScript and XMLHTTP) adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif, dimana teknik ini akan melakukan pertukaran data dibelakang layar sehingga halaman web tidak harus dimuat ulang secara keseluruhan.

Mungkin yang saya share kali ini merupakan teknik dasar dalam menggunakan ajax atau lebih dibilang ke pemahaman cara kerja ajax.

Pertama – tama siapkan kode dasar penggunaan ajax:

Dan dibawah ini saya akan jelaskan step demi step proses kerja nya.

1. Pastikan pada script html anda sudah terinstall jquery plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2. Buatlah form sederhana tanpa atribut “action” atau “method” seperti form pada umumnya. Tetapi tambahkan atribut ID pada form untuk mempermudah menggunakan ajax. ( <form id="myform">)

3. Melangkah ke penggunaan ajax pada kode javascript

Sedikit penjelasan mengenai kode javascript di atas:

$('form#myform').submit(function() {  ini merupakan sebuah event jquery yang akan menjalankan sebuah fungsi jika form dengan ID “myform” di submit.

var form = $(this).serialize(); kode ini dapat diartikan:  $(this) ini merupakan form yang disubmit, yaitu #myform dan serialize adalah fungsi jquery untuk membuat form menjadi text string dengan notasi url-encode standard.

$.post('ajax.php', form, function(response) { ini merupakan proses posting ke php dan pada kasus saya kali ini, proses ini dirujuk ke file ajax.php dan mengirim data form yang merupakan serialize dari form myform. Kemudian proses ini akan mengembalikan feedback ke sebuah variable dengan nama response

4. Setelah melakukan request dengan menggunakan javascript. Langkah selanjutnya adalah melakukan pengolahan terhadap data dan mengembalikan feedback dengan kode php. Semua kode untuk step ini harus diletakan pada bagian atas diantara kode – kode lainnya. Karena data yang dikembalikan harus benar – benar berformat json.

 

Jadi.. kalau form ini dijalankan pada browser anda bisa melihat proses requestnya melalui firebug. Jika anda belum tau firebug, silahkan baca selengkapnya disini.

Pada tab console di firebug, akan terlihat seperti gambar dibawah ini

cara menggunakan ajax

  • Poin 1,  pada gambar merupakan rujukan file yang direquest oleh ajax untuk pengolahan data.
  • Poin 2, Parameter yang dipost atau data yang akan diolah.

 

Kemudian pada tab “Response” akan terlihat seperti gambar dibawah ini:

cara menggunakan ajax-2

  • Poin 3, merupakan response yang dikembalikan oleh proses php, pada kode echo json_encode($response);
  • Poin 4, data response di tampilkan kembali pada layar dengan menggunakan javascript kode.

Sekian penjelasan singkat untuk cara menggunakan Ajax pada form. Semoga ini bisa membantu dan terimakasih 🙂

 

Share di:   Email this to someone Share on Facebook Tweet about this on Twitter Share on Google+ Share on LinkedIn

Tinggalkan Komentar: