Jutsu Coding: ajax dengan jquery

ajax dengan jquery
Di Posting Oleh : wandi
Kategori : javascript

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>

dan sekarang kita buat proses.html yang isinya hanya

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>

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

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 .

Mau liat atau download source code aplikasi premium bisa disini.

ajax dengan jquery

0 Komentar