Nusagatech

Cara Menggunakan Ajax Di JQuery

Tutorial JQuery

Ajax atau Asynchronous JavaScript and XML adalah sebuah teknologi di sisi klien (client side) yang dapat digunakan untuk membuat mengirim dan menerima data dari server di belakang layar (on background process) sehingga halaman web tidak perlu direload atau dimuat ulang secara keseluruhan untuk memperbarui konten yang tersedia.

Mengenal Ajax Di JQuery

Untuk membuat request ke server mengguanak ajax di JQuery, kita bisa menggunakan fungsi $.ajax(); atau jQuery.ajax(); . request yang dilakukan ajax bisa berupa POST maupun GET.  Contoh pembuatan request menggunakan ajax adalah sebagai berikut:

Keterangan:

  • url: diisi url tujuan yang memroses data dari sisi server
  • method: diisi post atau get
  • data: diisi parameter dan value data yang dikirim bisa juga berbentuk nama=Budairi&website=nusagates.com
  • success: jika request berhasil dilakukan maka kita bisa mengambil data respon dari server menggunakan argumen respon yang tersedia di dalam param
  • eter success tersebut.

Contoh Penggunaan Ajax

Contoh kali ini akan mengeksekusi ajax setelah sebuah tombol diklik. Respons dari server yang didapat berupa print data post request yang dikirim oleh ajax.

  • Buat sebuah tombol menggunakan HTML
    Simpan kode html tersebut pada sebuah file dengan nama ajax.html
  • Buat kode untuk menghandel event ketika tombol yang memiliki id tombol1 diklik
  • Buat sebuah file dengan nama proses.php. File ini akan digunakan untuk menghandel proses dari sisi server. Tambahkan kode di bawah ini untuk menghandel request ajax diatas.
    Setelah itu silahkan coba klik tombol di atas untuk menguji apakah request yang dilakukan oleh ajax berhasil dieksekusi atau tidak.

Mengirim Data Dari Form Melalui Ajax

Sebelum kita membahas mengenai cara mengirim data form melalui ajax, kita perlu mengetahui cara mengambil data dari form menggunakan jquery. Pengambilan data form berupa text bisa dilakukan menggunakan fungsi serialize(); sedangkan pengambilan data berupa file bisa menggunakan fungsi FormData();

Dengan kata lain, jika di dalam form tidak ada input type file maka kita bisa menggunakan serialize(); sedangkan jika di dalam form ada input type file bisa menggunakan FormData(); . Kita bisa menggunakan salah satu saja.

Contoh:

Misalnya kita memiliki form dengan id login <form id='login'>...</form> maka kita bisa mengambil data berupa teks dengan cara var data = $("#login").serialize(); .

Jika di dalam form tersebut ada input type file semisal <input type='file' name='gambar'/> maka untuk mendapatkan data file tersebut bisa menggunakan var data = new FormData($("#login")[0]); . Metode ini digunakan untuk mengganti serialize();

Sebagai bahan latihanbuatlah sebuah form menggunakan html seperti di bawah ini:

Kemudian buat hanlder untuk dieksekusi ketika Tombol 2 diklik menggunakan JQuery seperti di bawah ini:

Pada contoh di atas, form yang dibuat memiliki id form-coba dandatanyahanya berupa teks maka pengambilan datanya menggunakan var data_form = $("#form-coba").serialize();

Tambahkan baris kode php di bawah inike dalam file proses.php yang telah dibuat sebelumnye:

Kode Lengkap

Kode lengkap untuk membuat tampilan uji coba ajax (ajax.html) adalah sebagai berikut:

Kode lengkap proses.php adalah sebagai berikut:

Demo Menggunakan Ajax Di Jquery

Demo yang dibuat pada tutorial ini bisa diakses melalui link berikut.

Kata Kunci

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: nusagates@gmail.com. Hubungi via 0822 2500 5825

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
Close