Cara Menggunakan Ajax Di JQuery

Ajax atau Asynchronous JavaScript and XML adalah sebuah teknologi di sisi klien (client side) yang dapat digunakan untuk membuat mengirim dan menerima data dari server di belakang layar (on background process) sehingga halaman web tidak perlu direload atau dimuat ulang secara keseluruhan untuk memperbarui konten yang tersedia.

Mengenal Ajax Di JQuery

Untuk membuat request ke server mengguanak ajax di JQuery, kita bisa menggunakan fungsi $.ajax(); atau jQuery.ajax(); . request yang dilakukan ajax bisa berupa POST maupun GET.  Contoh pembuatan request menggunakan ajax adalah sebagai berikut:

$.ajax({
  url: "proses.php?ajax1",
  method: "post",
  data: { nama: "Budairi", website: "nusagates.com" },
  success: (respon) => {
      alert(respon);
  }
});

Keterangan:

• url: diisi url tujuan yang memroses data dari sisi server
• method: diisi post atau get
• data: diisi parameter dan value data yang dikirim bisa juga berbentuk nama=Budairi&website=nusagates.com
• success: jika request berhasil dilakukan maka kita bisa mengambil data respon dari server menggunakan argumen respon yang tersedia di dalam param
• eter success tersebut.

Contoh Penggunaan Ajax

Contoh kali ini akan mengeksekusi ajax setelah sebuah tombol diklik. Respons dari server yang didapat berupa print data post request yang dikirim oleh ajax.

• Buat sebuah tombol menggunakan HTML

  <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-primary">
          <div class="panel-heading">
              <h3 class="panel-title">Contoh 1</h3>
          </div>
          <div class="panel-body">
              <p>Silahkan klik tombol di bawah untuk mengeksekusi ajax.</p>
          </div>
          <div class="panel-footer"><button class="btn btn-primary" id="tombol1">Tombol 1</button>
          </div>
      </div>
  </div>
  

  Simpan kode html tersebut pada sebuah file dengan nama ajax.html

• Buat kode untuk menghandel event ketika tombol yang memiliki id tombol1 diklik

  $("#tombol1").click((e) => {
      $.ajax({
          url: "proses.php?ajax1",
          method: "post",
          data: { nama: "Budairi", website: "nusagates.com" },
          success: (respon) => {
              alert(respon);
          }
      });
  });

• Buat sebuah file dengan nama proses.php. File ini akan digunakan untuk menghandel proses dari sisi server. Tambahkan kode di bawah ini untuk menghandel request ajax diatas.

  if (isset($_GET['ajax1'])) {
      print_r($_POST);
  }

  Setelah itu silahkan coba klik tombol di atas untuk menguji apakah request yang dilakukan oleh ajax berhasil dieksekusi atau tidak.

Mengirim Data Dari Form Melalui Ajax

Sebelum kita membahas mengenai cara mengirim data form melalui ajax, kita perlu mengetahui cara mengambil data dari form menggunakan jquery. Pengambilan data form berupa text bisa dilakukan menggunakan fungsi serialize(); sedangkan pengambilan data berupa file bisa menggunakan fungsi FormData();

Dengan kata lain, jika di dalam form tidak ada input type file maka kita bisa menggunakan serialize(); sedangkan jika di dalam form ada input type file bisa menggunakan FormData(); . Kita bisa menggunakan salah satu saja.

Contoh:

Misalnya kita memiliki form dengan id login <form id=’login’>…</form> maka kita bisa mengambil data berupa teks dengan cara var data = $(“#login”).serialize(); .

Jika di dalam form tersebut ada input type file semisal <input type=’file’ name=’gambar’/> maka untuk mendapatkan data file tersebut bisa menggunakan var data = new FormData($(“#login”)[0]); . Metode ini digunakan untuk mengganti serialize();

Sebagai bahan latihanbuatlah sebuah form menggunakan html seperti di bawah ini:

<div class="col-md-6 col-md-offset-3">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Contoh 2</h3>
        </div>
        <div class="panel-body">
            <p>Silahkan isi form lalu klik tombol di bawah untuk mengirim data form melalui ajax
            </p>
            <form id="form-coba">
                <div class="form-group">
                    <label for="nama">Nama</label>
                    <input type="text" name="nama" id="nama" class="form-control" />
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button class="btn btn-info" id="tombol2">Tombol 2</button>
        </div>
    </div>
</div>

Kemudian buat hanlder untuk dieksekusi ketika Tombol 2 diklik menggunakan JQuery seperti di bawah ini:

$("#tombol2").click((e) => {
    var data_form = $("#form-coba").serialize();
    $.ajax({
        url: "proses.php?ajax2",
        method: "post",
        data: data_form,
        success: (respon) => {
            alert(respon);
        }
    });
});

Pada contoh di atas, form yang dibuat memiliki id form-coba dandatanyahanya berupa teks maka pengambilan datanya menggunakan var data_form = $(“#form-coba”).serialize();

Tambahkan baris kode php di bawah inike dalam file proses.php yang telah dibuat sebelumnye:

if (isset($_GET['ajax2'])) {
    $nama = isset($_POST['nama']) ? $_POST['nama'] : '';
    if (empty($nama)) {
        echo "Anda belum mengisi nama";
    } else {
        echo "Nama Anda: ". $nama;
    }
}

Kode Lengkap

Kode lengkap untuk membuat tampilan uji coba ajax (ajax.html) adalah sebagai berikut:

<!DOCTYPE html>
<html>

<head>
    <title>Tutorial Ajax</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="d-flex justify-content-center">
            <div class="row text-center justify-content-center">
                <div style="margin-top: 80px" class="col-md-12 mb-6">
                    <h2>Tutorial Ajax</h2>
                </div>
                <div class="col-md-6 col-md-offset-3">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Contoh 1</h3>
                        </div>
                        <div class="panel-body">
                            <p>Silahkan klik tombol di bawah untuk mengeksekusi ajax.</p>
                        </div>
                        <div class="panel-footer"><button class="btn btn-primary" id="tombol1">Tombol 1</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-md-offset-3">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Contoh 2</h3>
                        </div>
                        <div class="panel-body">
                            <p>Silahkan isi form lalu klik tombol di bawah untuk mengirim data form melalui ajax
                            </p>
                            <form id="form-coba">
                                <div class="form-group">
                                    <label for="nama">Nama</label>
                                    <input type="text" name="nama" id="nama" class="form-control" />
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer">
                            <button class="btn btn-info" id="tombol2">Tombol 2</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(() => {
            $("#tombol1").click((e) => {
                $.ajax({
                    url: "proses.php?ajax1",
                    method: "post",
                    data: { nama: "Budairi", website: "nusagates.com" },
                    success: (respon) => {
                        alert(respon);
                    }
                });
            });
            $("#tombol2").click((e) => {
                var data_form = $("#form-coba").serialize();
                $.ajax({
                    url: "proses.php?ajax2",
                    method: "post",
                    data: data_form,
                    success: (respon) => {
                        alert(respon);
                    }
                });
            });
        });
    </script>
</body>

</html>

Kode lengkap proses.php adalah sebagai berikut:

<?php
if (isset($_GET['ajax1'])) {
    print_r($_POST);
}
if (isset($_GET['ajax2'])) {
    $nama = isset($_POST['nama']) ? $_POST['nama'] : '';
    if (empty($nama)) {
        echo "Anda belum mengisi nama";
    } else {
        echo "Nama Anda: ". $nama;
    }
}

Demo Menggunakan Ajax Di Jquery

Demo yang dibuat pada tutorial ini bisa diakses melalui link berikut.