Tutorial jQuery Ajax Menggunakan Metode GET atau POST

Tutorial jQuery Ajax Menggunakan Metode GET atau POST . Disini akan dibahas bagaimana membuat aplikasi Ajax menggunakan jQuery dimana libr... thumbnail 1 summary

10.13.00

Tutorial jQuery Ajax Menggunakan Metode GET atau POST. Disini akan dibahas bagaimana membuat aplikasi Ajax menggunakan jQuery dimana library jQuery mempunyai fungsi-fungsi khusus untuk pembuatan Ajax.

Dengan menggunakan jQuery, kita dapat melakukan request data TXT, HTML, XML, PHP bahkan JSON dari server menggunakan metode GET atau POST.

Salah satu fungsi yang disediakan oleh jQuery yang berkaitan dengan Ajax adalah fungsi load(). Fungsi load() berfungsi untuk mengambil data dari server dan menempatkannya ke dalam elemen HTML.

Sintaks :

$(selector).load(url,data,callback)

Parameter url adalah alamat di server yang akan kita ambil atau panggil
Parameter data pasangan key dan value yang dikirim ke server.
Parameter callback fungsi yang dieksekusi jika data diambil.

Contoh :
Misal kita punya file data.txt, yang isinya :
Mencoba Programming menggunakan jQuery konten dari file data.txt
Lalu kita buat kode ajax untuk me-load konten dari data.txt, berikut contoh kode load.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tombol").click(function(){
$('#teks').load('data.txt');
});

});
</script>
</head>
<body>
<div id="teks">

</div>
<button id="tombol" type="button">Klik Saya</button>
</body>
</html>

Dari contoh di atas, pertama adalah kita ambil file jquery.js yang dapat kamu download di www.jquery.com atau di sini. Apabila kita mengklik tombol Klik Ini, maka akan segera menjalankan fungsi load file data.txt
dan memasukkannya ke dalam HTML <div id="teks">.

Contoh jika memanggil file berupa PHP dan mengirimkan beberapa data atau parameter untuk diolah di sisi server.

load2.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tombol").click(function(){
$('#teks').load("data.php","nama=greget5kali&email=greget5kali@gmail.com",beritahu());
});
});

function beritahu(){
alert("sudah berhasil diambil datanya");
}
</script>
</head>
<body>
<div id="teks">

</div>
<button id="tombol" type="button">Click Me</button>
</body>
</html>

Pada contoh di atas kita melakukan request ke server untuk memanggil file PHP data.php dan mengirimkan parameter dan nilainya dengan metode GET.
Kemudian meng-eksekusi fungsi beritahu().