Sunday, January 24, 2016
Advertisement
Advertisement
Sudah mengerti tentang pengertian dan cara penggunaan JQuery pada website atau blog ? jika belum sebaiknya anda baca dahulu pengertian jquery .
Jika sudah mengenal apa itu JQuery, silahkan baca artikel berikut ini untuk mengenal apa itu AJAX yang dimana sering digunakan oleh para web developer ?
AJAX merupakan singkatan dari Asynchronous JavaScript, pertama kali ajax diperkenalkan adalah versi javascript dan terlihat kodenya yang cukup panjang tetapi sering berkembangnya jaman munculah sebuah library yang dimana membuat kode ajax versi javascript dapat dipendekkan dan kodenya mudah dimengerti, sebut saja library yang familiar ini, yaitu JQuery yang sering kita gunakan ini .
Perlu diketahui mengenai AJAX versi Jquery ini
Ajax versi jquery ini memang sangat simpel sekali, mungkin jika anda melihat dan mencobanya dapat dipastikan anda bisa menerapkan dan langsung memahami penerapan struktur ajax ini. Mengapa ? Yang kita pikirkan pada ajax Jquery ini adalah bagaimana pengiriman parameter dan dengan cara apa kita memanipulasi html jika kondisinya sukses maupun gagal serta beforeSend .Sebelum kita membahas ke pembahasan selanjutnya sebaiknya kita sudah memahami bagian - bagain jquery seperti Selector maupun event .
Struktur kode jquery
url : "params.php", // alamat url yang akan dikirimkan sebuah parameter
data:params , // berisi data parameter yang akan dikirim ke proses
type:POST/GET, // type parameter apa yang akan dikirimkan ke alamat proses, ada dua pilihan yaitu GET atau POST .
beforeSend:function(event){ // langkah apa yang ingin anda proses sebelum data diproses ke alamat url
// lakukan sesuatu}
success:function(event){ // jika proses ajax berhasil akan melakukan apa .
}
error:function(event){ // tampilkan apa jika proses ajax gagal .
}
Contoh penerapan ajax secara sederhana
$.ajax({
url:'contoh.php',
type:'GET',
data:params,
success:function(){
// lakukan sesuatu
}
});
Berikut contoh kode ajax secara kesuluruhan dan bisa anda terapkan sekarang :
Simpan dengan nama formHmtl.html dan proses.php .
formHtml.html
<html>
<body>
<form class="latihanAjax">
<input type="text" id="inputAjax" placeholder="Ketikkan nama .."><br>
<input type="submit" value="SUBMIT">
<br>
<div id="loader" style="display:block"></div>
Nama saya adalah <span id="namaSaya"></span><br>
by : <b>Indonesiakode.blogspot.co.id</b>
</form>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(".latihanAjax").submit(function(e){
e.preventDefault();
var valNama = $("#inputAjax").val();
$.ajax({
url:"proses.php",
type:'POST', // mengirim parameter bertipe POST
data:'nama='+valNama, // mengirim parameter nama dengan value dari variable valNama
beforeSend:function(){
$("#loader").html("Loading ...");
},
success:function(data){
$("#loader").hide();
$("#namaSaya").html(data).fadeOut('slow').fadeIn(3000); // response dari proses.php
}
});
});
</script>
</body>
</html>
proses.php
<?php $a = isset($_POST['nama']) ? $_POST['nama'] : ""; //mengecek dan mengambil value nama dari proses ajax echo "<b style='color:red'>".$a."</b>"; // menampilkan value dari variable $a ?>
Simpel sekali bukan ? semoga anda dapat memahami dan tujuan dibuatnya beberapa postingan yang ada diblog ini bukan untuk menggurui anda atau pamer dll, tetapi indonesiakode berusaha untuk menampilkan konten yang sudah teruji dari pengalaman yang sudah dicapai .
Inti untuk dapat memahami kode hanya 3, yaitu kegigihan, keingintahuan tinggi, serta jangan lupa mencoba .
Advertisement
Advertisement