ajax dengan jquery
Kali ini saya akan membahas mengenai ajax dengan menggunakan jquery .Kalo kalian belum atu apa itu ajax atau belum tau apa itu jquery ? saya telah membuat bahasan bahasannya mengenai apa itu jquery dan apa itu ajax . Sebelum di mulainya pembelajaran kali ini kalian mendonwload dulu jquery atau kita bisa ambil dari jquery google. Untuk tutorial kali ini saya akan ambil saja dari google .
baca juga
Oke sekarang kita akan coba cara menggunakan ajax dengan jquery . Baik untuk mengunakan ajax di jquery ini kita harus mengetik
$.ajax({ });
contohnya
$.ajax({
method:"GET",
url :"proses.html",
}).done(function () {
$(".kotak_tulisan").load("proses.html");
});
Disana contohnya yaitu mengirim data dengan metode get ( method) dan mengirimnya kemana ( url ) . done itu maksudnya ajaxnya berhasil makan akan melakukan fungsi done itu, yaitu melakukan instruksi atau perintah
$(".kotak_tulisan").load("proses.html");
artinya akan mesisipkan atau mengload di bagian class kotak_tulisan yaitu mengload proses.html . Mudah mudahan bisa di pahami. sekarang kita coba praktekan . saya membuat file dengan nama tutorial.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar jquery ajax</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#input_tulisan").keydown(function () {
$.ajax({
method:"GET",
url :"proses.html",
}).done(function () {
$(".kotak_tulisan").load("proses.html");
});
});
});
</script>
<input type="text"placeholder="Ketikan tulisan"id="input_tulisan">
<div class="kotak_tulisan"></div>
</body>
</html>
Berhasil mengirim data !!!
Maka hasinya ketika kita mengetik di inputan maka akan melakukan ajax yang tadi saya sudah jelaskan
$.ajax({
method:"GET",
url :"proses.html",
}).done(function () {
$(".kotak_tulisan").load("proses.html");
});
Yang tadi itu baru yang mudahnya saja sekarang kita akan coba mengirim data. baik kita coba . Kita edit lagi yang bagian tutorial.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar jquery ajax</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#input_tulisan").keydown(function () {
var name=$("#input_tulisan").val();
$.ajax({
method:"GET",
url :"proses.php",
data :{nama:name}
}).done(function (data) {
$(".kotak_tulisan").html(data);
});
});
});
</script>
<input type="text"placeholder="Ketikan tulisan"id="input_tulisan">
<div class="kotak_tulisan"></div>
</body>
</html>
$("#input_tulisan").keydown(function () {
var name=$("#input_tulisan").val();
$.ajax({
method:"GET",
url :"proses.php",
data :{nama:name}
}).done(function (data) {
$(".kotak_tulisan").html(data);
});
});
Ketika kita mengketik di bagian inputan, maka akan mengset variable nama dan melakukan ajax
method:"GET",
url :"proses.html",
}).done(function () {
$(".kotak_tulisan").load("proses.html");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar jquery ajax</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#input_tulisan").keydown(function () {
var name=$("#input_tulisan").val();
$.ajax({
method:"GET",
url :"proses.php",
data :{nama:name}
}).done(function (data) {
$(".kotak_tulisan").html(data);
});
});
});
</script>
<input type="text"placeholder="Ketikan tulisan"id="input_tulisan">
<div class="kotak_tulisan"></div>
</body>
</html>
Sekarang kita buat file yang namanya proses.php
<?php
if(isset($_GET['nama'])){
echo "nama anda $_GET[nama]";
}
?>
Prosenya gimana sih ?
$("#input_tulisan").keydown(function () {
var name=$("#input_tulisan").val();
$.ajax({
method:"GET",
url :"proses.php",
data :{nama:name}
}).done(function (data) {
$(".kotak_tulisan").html(data);
});
});
Ketika kita mengketik di bagian inputan, maka akan mengset variable nama dan melakukan ajax
var name=$("#input_tulisan").val();
$.ajax({
method:"GET",
url :"proses.php",
data :{nama:name}
}).done(function (data) {
$(".kotak_tulisan").html(data);
});
jika berhasil kita akan melakukan
$(".kotak_tulisan").html(data);
yang berarti mengambil data data di proses.php yang isinya
<?php
if(isset($_GET['nama'])){
echo "nama anda $_GET[nama]";
}
?>
Gimana semoga bisa di pahami ya kalo belum paham bisa diulang lagi atau tanya sama saya, semoga bisa bantu . Kalo kita memperlajari ajax ini dalam satu arikel bisa buyar jadi nanti kita akan lanjutakan lagi pembelajaran kita mengenai ajax . Semoga bermanfaat dan sampai jumpa .
Belum ada Komentar untuk "ajax dengan jquery"
Posting Komentar