Technology

How To Use Ajax In JQuery

Ajax or Asynchronous JavaScript and XML is a client side technology that can be used to make sending and receiving data from a server behind the scenes (on background process) so that web pages do not need to be reloaded or reloaded as a whole to update content that available.

Ajax Introduction at JQuery

We could use $.ajax(); atau jQuery.ajax();  for make an ajax call at JQuery. The request can be POST or GET method.  Example:

Note:

  • url: filled with destination url
  • method:  post or get
  • data: filled with parametres and its value. The data sent can be in this format nama=Budairi&website=nusagates.com
  • success: Ajax call success and we can get response as we expected from server

Examples of Ajax Usage

We make an ajax call after a button is clicked. The response from . Response from the server is print data from post request,

  • Cerate a button using HTML
    Save the code in a file called ajax.html
  • Create lines of code for handling click event
  • Create a file for handling post request sent by ajax called proses.php.
    Test the button. Fire a click event on it.

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.

This post is also available in: idIndonesian

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

Tanggapan Kamu?

Lihat Juga

Close
Back to top button
Close