in

ajax dengan jquery

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

    apa itu ajaxapa itu jquery

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”);
          });

cara menggunakan ajax di jqueryYang 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
<?phpif(isset($_GET[‘nama’])){  echo “nama anda $_GET[nama]”;} ?>
cara menggunakan ajax di jqueryProsenya 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 .

Written by admin