Cara menggunakan javascript ajax post

Intinya kita mencoba menampilkan data dari URL lain ke halaman web kita dan proses load datanya dilakukan di thread baru.

Maksudnya gimana?

Jadi ketika sebuah proses dilakukan misalnya di thread B, proses di thread A tidak akan menunggu sampai proses di thread B selesai dan inilah yang dinamakan asyncrounous.

Untuk lebih jelasanya perhatikan kode berikut,

var xhr = new XMLHttpRequest();
	xhr.open("GET", "https://reqres.in/api/users?page=2");
	xhr.send();
	xhr.addEventListener("load", () => {
	  setTimeout(function() {
	      document.write(xhr.responseText);
	   }, 1500);//jeda selama 1.5 detik
	});
document.write("Tunggu 1.5 detik");

Hasilnya,

Jika kita perhatin, kode document.write("Tunggu 1.5 detik") berada di bawah document.write(document.write(xhr.responseText)) tapi yang dulu di kerjakan adalah kode document.write("Tunggu 1.5 detik"), itu karena kode document.write("Tunggu 1.5 detik") berada di thread utama sedangkan document.write(document.write(xhr.responseText)) dikerjakan di thread baru dimana prosesnya di jeda selam 1.5 detik.

Tutorial Input Data Menggunakan AJAX Jquery - Halo semua, di tutorial kali ini kita akan belajar menggunakan method / metode POST pada AJAX untuk melakukan input data menggunakan ajax jquery. Pada artikel sebelumnya, kompikaleng sudah memberikan tutorial membuat CRUD dengan gabungan dari AJAX dan Codeigniter. Nah, tutorial kali ini merupakan bahasan lanjutan mengenai script ajax yang ada di artikel sebelumnya. Setelah tutorial kali ini, diharapkan kalian bisa lebih paham sintaks – sintaks ajax dan paham implementasi ajax jquery untuk melakukan input data ke database

AJAX adalah suatu teknik / metode dalam pemrograman suatu laman web untuk melakukan proses pertukaran data pada background.Dengan begitu, proses pertukaran data tidak memerlukan reload page dari browser dan tidak perlu menunggu proses sebelumnya alias dapat dilakukan beberapa proses sekaligus.

Bagi kalian yang sudah baca artikel sebelumnya, seharusnya udah paham ya tentang ajax jquery ini.

Nah, pada tutorial singkat kali ini. Kita akan mensimulasikan metode post pada ajax dan PHP.

Persiapan

Langkah pertama, kita siapkan dulu apa saja yang kita butuhkan untuk simulasi input data menggunakan ajax jquery kali ini.

Buatlah folder baru di web server kalian, kemudian isi dengan struktur sebagai berikut :

Untuk menggunakan Jquery ajax, tentu saja kita memerlukan library jquery sebagai base javascriptnya. Sedangkan, untuk tampilan disini admin menggunakan boostrap 3.

Download assetsnya disini gan.

Disini, admin menggunakan PHP native sebagai serverside untuk menerima metode post dari ajax nantinya.

Cara Input Data Menggunakan AJAX Jquery

Setelah menyiapkan file file resources, kita mulai dari serverside dulu untuk menangkap data dari tampilan nantinya.

Terima.php

Buat file baru kemudian beri nama terima.php. Lalu isi dengan script berikut :

$nama = $_POST['nama']; //Menangkap inputan nama dari metode post

$umur = $_POST['umur']; //Menangkap inputan umur dari metode post

 

$data['nama'] = $nama; //Membungkus variabel nama dalam array variabel data

$data['umur'] = $umur; //Membungkus variabel umur dalam array variabel data

 

print_r(json_encode($data)); //Print out hasil encode json dari array variabel data.

 

?>

Nah, penjelasan masing – masing kode sudah saya beri di bagian komen ya. Silahkan dipahami. Kalau kurang jelas atau tidak paham bisa ditanyakan di kolom komentar ya.

Index.html

Setelah selesai membuat server side untuk menangkap nilai dari tampilan, tentunya setelah itu kita membuat tampilannya.

Disini karena hanya untuk sekedar pembelajaran, kali ini kita menggunakan Form sederhana yang terdiri dari nama dan umur, seperti gambar di bawah : 

Buat file baru, kemudian beri nama index.html. Lalu, isi dengan script di bawah untuk membuat tampilan

Script :

   

   

   

   

   

       

           

                Input Data Ajax KompiKaleng

           

           

                   

                       

                           

                                Nama

                               

                           

                           

                                Umur

                               

                           

                       

                   

 

                   

                       

                           

                                Submit

                           

                       

                   

           

       

   

Setelah membuat tampilan, saatnya kita mulai ke javascriptnya.

Pastekan script di bawah ini pada bagian bawah script di atas, 

Mari kita bahas javascript di atas,

$(document).ready(function(){

//kode

})

Blok script di atas, merupakan syntax dasar jquery untuk mengeksekusi fungsi yang ada di dalamnya setelah ‘dokumen’ atau tampilan telah siap.

$("#btn_kirim").on('click',function()

Potongan script di atas merupakan event handler on Click ya temen – temen. Artinya, fungsi yang ada di dalam event on Click ini akan dipanggil / diekseskusi setelah selectornya ‘di-klik’ atau dipencet.

Dalam kasus ini, Button dengan id btn_kirim lah sebagai selectornya.

var nama    = $("input[name='nama']").val();

var umur    = $("input[name='umur']").val();

 Potongan script di atas, digunakan untuk menyimpan value / nilai dari inputan nama dan umur.

Syntax Ajax

Selanjutnya, kita akan memahami sintaks dasar ajax untuk melakukan metode post dan get pada PHP khususnya.

$.ajax({

                url: 'terima.php',  //url tujuan terima.php

                type: 'POST',       // metode request post

                dataType: 'json',   // format data yang dikembalikan dari server

                data: {nama:nama,umur:umur},  // variabel yang akan dikirimkan

                success: function(response){

                    alert('Nama anda adalah '+response['nama']+ '. Umur Anda adalah '+response['umur']+' tahun.');  

                }

            })

Menurut web resmi jquery langsung , sintaks dasar ajax adalah sebagai berikut : 

jQuery.ajax( url [, settings ] )

Jika kita mengacu pada script ajax yang kita gunakan pada simulasi kali ini, dapat kita liat bahwa terdapat beberapa settings parameter yang kita gunakan untuk mengatur ajax request.

Settings parameter yang digunakan pada tutorial kali ini yaitu url, type, dataType, data, success.

Kita bahas satu – satu ya,

url

adalah URL yang akan dituju / dikirimkan pada request ajax.

type

adalah tipe dari request ajax bisa dikatakan metode dari request ajax (POST,GET dan lain-lain).

dataType

adalah format data yang akan dikembalikan ke response ajax.

data

merupakan settings yang berisikan variabel dan nilai yang akan kita bawa di request ajax. Sebagai contoh, di tutorial ini saya membawa variabel nama dan umur untuk dikirmkan ke server.

Sintaks : 

 data: {key_name:value_name, key_name_2:value_name_2, .....}

key_name merupakan nama yang akan kita ‘tangkap’ pada request post di serverside nantinya. Sedangkan, value_name merupakan nilai yang akan disimpan di key_name.

success

merupakan fungsi yang dipanggil ketika request ajax berhasil dengan response code = 200. Fungsi success ini membawa 3 argumen antara lain data yang direturn dari proses request ajax, string textstatus, dan, jqxhr object. Kalian bisa baca lebih lengkap mengenai api – api jquery disini

Tapi, di antara 3 argumen tersebut yang paling penting yaitu argumen data hasil return dari request ajax. Argumen tersebut dapat kita deklarasikan dengan menambah parameter di fungsi success. seperti script di bawah :

success: function(response){

alert('Nama anda adalah '+response['nama']+ '. Umur Anda adalah '+response['umur']+' tahun.');  

}

response merupakan argumen yang berisikan data hasil response, kalian bisa ganti dengan nama yang lain.

Pada script di atas kita akan membuat alert berisi hasil request ajax ketika request ajax success.

Dapat kita liat, response yang kita dapat dari request ajax berformat objek.

Kemudian kita tampilkan hasil response tersebut pada alert,

Dengan menggunakan ajax untuk melakukan proses pertukaran data, kita dapat lebih memaksimalkan UI ( User Interface ) dan juga UX (User Experience ) pada laman web kita. Karena, dengan menggunakan ajax proses pertukaran data dapat dilakukan di latar belakang / background sehingga browser tidak perlu refresh / reload.

Apa itu AJAX pada JavaScript?

Kapan menggunakan AJAX?

Apa itu jQuery dan jelaskan fungsinya?

Apa yang dimaksud dengan AJAX dan sebutkan bagian bagian dari AJAX?