.png)
Belajar AJAX dengan JQUERY
jika menggunakan jquery kita akan lebih mudah dalam penulisan kodenya dibanding dengan javascript asli. jika teman-teman belum familiar ajax, ajax adalah singkatan dari assyncronous javascript and xml jika anda suka bermain facebook saat kita mengklik tombol like kita tidak perlu me reload halaman secara utuh, perubahannya akan terjadi secara langsung karena ajax bekerja dibelakang layar. ajax akan me reload file yang dibutuhkan saja tidak semua halaman di reload.
jika menggunakan ajax dengan jquery tentu yang teman-teman butuhkan adalah file jquery nya. program dibawah akan menjalankan fungsinya setelah semua halaman berhasil di load. Jika menggunakan jquery kita bisa menggunakan tiga metode yaitu metode load, metode get dan pos, dan metode ajax.
yang pertama metode load parameter yang wajib yaitu url nya dimana file kita akan disimpan. selain parameter yang wajib ada parameter yang optional misalnya data, status, xhr, callback. di program ini kita console.log yang bisa anda lihat di inspeksi elemen -> console jika filenya berhasil di load maka di console anda bisa melihat kata berhasil dan statusnya 200 yang artinya file berhasil di load namun misalnya filenya tidak ada maka di konsole anda akan melihat kata tidak berhasil dan stautusnya 404 file not found
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode load</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
// load -> container.load(url)
$('div').load('index2.html')
});
});
</script>
</body>
</html>
yang kedua dengan metode post dan get, post biasanya dipakai untuk mengirim data dan get dipakai untuk mengambil data program ini jika tombol diklik maka akan merequest file tertentu cara menggunakanya post dan get penulisanya sama $.get atau $.post dan parameternya url disini kita menggunakan test.php
jadi di program ini kita mengambil data dari file test.php dan menyimpanya di div kosong
// Metode get
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode get</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
//parameter wajib->url
//data, function(status, data, xhr), dataType
$.get('test.php',
{'nama':'Hilman'}
).done(function(data){
$('div').html(data);
});
});
});
</script>
</body>
</html>
//metode Post
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode post</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
//parameter wajib->url
//data, function(status, data, xhr), dataType
$.post('test.php',
{'nama':'Hilman'}
).done(function(data){
$('div').html(data);
});
});
});
</script>
</body>
</html>
dan yang ketiga adalah metode ajax dengan metode ajax tidak jauh berbeda dengan kedua metode sebelumnya tapi dengan metode ajax sangat banyak parameter yang bisa kita gunakan jika temen - temen mau melihat daftar parameter yang bisa digunakan dengan metode ajax bisa dilihat di w3schools.com disitu ada async, jsonp, username, password, timeout dan masih banyak lagi tapi kita tidak usah menggunakan
semua parameter yang ada hanya parameter yang kita butuhkan yang akan kita gunakan
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQUERY AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
</head>
<body>
<h2>JQUERY AJAX metode ajax</h2>
<div></div>
<button id="tombol">Klik di Sini!</button>
<script>
$(document).ready(function(){
$('#tombol').click(function(){
//parameter wajib->url
//data, function(status, data, xhr), dataType
$.ajax({
method : "POST",
url : "test.php",
data : { nama: "Hilman" }
}).done(function(data2){
$('div').html(data2);
});
});
});
</script>
</body>
</html>
dan ini isi dari file test.php nya:
<?php
if($_POST['nama']){
$test = $_POST['nama'];
}else{
$test= 'nama belum diterima';
}
echo $test;
?>
Ok itulah cara menggunakan AJAX dengan JQUERY semoga bermanfaat
0 komentar :