Kita akan belajar bagaimana cara membuat AJAX dengan response data HTML memakai metode GET dan dimasukkan ke dalam elemen yang ditentukan pada halaman utama.

AJAX dengan jQuery Part 2

Oke kali ini saya akan melanjutkan tutorial yang dipublish beberapa hari yang lalu tentang AJAX dengan jQuery. Tutorial AJAX dengan jQuery Part 1 menjelaskan bagaimana ajax bekerja dan mempraktikan membuat aplikasi request sederhana dengan menggunakan metode AJAX. Sebelum masuk pada tutorial JSON, maka pada tutorial lanjutan ini kita akan sama-sama belajar bagaimana cara membuat request dengan respon berupa data HTML dengan metode GET dan dimasukkan ke dalam elemen yang ditentukan pada halaman utama beserta contoh parsing variable dari server ke client (halaman utama html).

Membuat Halaman Client

Pastikan server sudah dijalankan dengan benar, setelah itu maka buatlah sebuah halaman HTML yang berisi kode-kode HTML seperti di bawah ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh AJAX 2 - Response HTML</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <button id="tombol">Klik di sini!</button>
    <div id="tampilan"></div>
  </body>
</html>

Simpan file tersebut dengan nama client.html dan simpen di folder /htdocs/ajax/

Maka hasilnya setelah kita lihat di browser (localhost/ajax/client.html) adalah terdapat sebuah tombol bertulisan "Klik di sini!", seperti di bawah ini:

 

Membuat Halaman Server

Nah, kita ingin mendapatkan data html dari server dan data tersebut dimasukkan ke dalam div yang mempunyai id="tampilan". Sebelumnya kita buat terlebih dahulu file server.php dan simpan di dalam direktori yang sama, yaitu /htdocs/ajax/

Isikan file server.php tersebut dengan kode di bawah ini:

<?php
$nama = 'Cecep Yusuf';
$alamat = 'Jakarta';
$pekerjaan = 'Programmer';
?>
<table>
  <tr>
    <td>Nama Lengkap:</td>
    <td><?php echo $nama ?></td>
  </tr>
  <tr>
    <td>Alamat:</td>
    <td><?php echo $alamat ?></td>
  </tr>
  <tr>
    <td>Pekerjaan:</td>
    <td><?php echo $pekerjaan ?></td>
  </tr>
</table>

File tersebut berisi contoh html yaitu tabel yang membentuk detail dari profil sederhana seseorang. Nantinya, profil ini akan muncul di client dan dimasukkan ke dalam div yang idnya "tampilan".

Cara meload data tersebut ketika tombol diklik adalah dengan menggunakan javascript di bawah ini dan diletakkan sebelum tag </head>:

    <script>
      $().ready(function(){
        $('#tombol').click(function(){
          $.ajax({
            url: 'server.php',
            success: function(html){
              $('#tampilan').html(html);
            }
          });
        });
      });
    </script>

arti script di atas adalah:

Ketika ready/html telah semua terload, maka deklarasikan bahwa jika button yang mempunyai id="tombol" diklik, maka program akan melakukan proses HTTP request kepada file server.php. Setelah request sukses dan berjalan dengan baik, maka ambil semua isi html dari server dan masukkan ke dalam div yang mempunyai id="tampilan". Untuk mencobanya, silakan buka http://localhost/ajax/client.html dan coba klik tombolnya. Maka yang terjadi kini si div kosong tersebut (tampilan) akan terisi oleh table yang didefinisikan di server.php.

Nah, sekarang kita akan belajar bagaimana server mengambil data dari client, yang kemudian data tersebut diolah diserver dan dikirim balik ke client dengan hasil olahan data tersebut? Simpelnya, variable nama, alamat, dan pekerjaan kita tentukan di client memakai javascript.

Langkah yang harus dilakukan adalah dengan menambahkan option/atribut data yang mana berisi nilai data yang akan dikirim ke server. Type request adalah get, tambahkan juga atribut type, isikan dengan get. Data berbentuk Javascript annotation atau bisa berupa query string. Contoh kodenya:

 

    <script>
      $().ready(function(){
        $('#tombol').click(function(){
          $.ajax({
            url: 'server.php',
            type: 'get',
            data: {
              nama: "Cecep Yusuf",
              alamat: "Jakarta",
              pekerjaan: "Programmer"
            },
            success: function(html){
              $('#tampilan').html(html);
            }
          });
        });
      });
    </script>

Kemudian, di server.php isikan kode HTML dan PHP berikut ini:

<table>
  <tr>
    <td>Nama Lengkap:</td>
    <td><?php echo $_GET['nama'] ?></td>
  </tr>
  <tr>
    <td>Alamat:</td>
    <td><?php echo $_GET['alamat'] ?></td>
  </tr>
  <tr>
    <td>Pekerjaan:</td>
    <td><?php echo $_GET['pekerjaan'] ?></td>
  </tr>
</table>

Di server ada perubahan dibandingkan dengan isi kode sebelumnya. Jika tadi kita mengambil variable dari file server.php itu sendiri, kali ini data diambil dari client.php dengan menggunakan javascript. Kemudian setelah itu, di server kita menggunakan $_GET yang artinya mengambil data dari request GET.

Hasil akhir, coba refresh halaman client.html dan klik tombolnya. Apa yang terjadi? Yup, hasil yang sama. Bedanya adalah, kita bisa menentukan nilai berdasarkan permintaan dari client.. Biasanya data diterapkan pada form-form yang ada yang kemudian nanti server akan menangkap data tersebut dan diolah, dijadikan timbal balik HTML di client.html

Kode lengkap:

client.html

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh AJAX 2 - Response HTML</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
      $().ready(function(){
        $('#tombol').click(function(){
          $.ajax({
            url: 'server.php',
            type: 'get',
            data: {
              nama: "Cecep Yusuf",
              alamat: "Jakarta",
              pekerjaan: "Programmer"
            },
            success: function(html){
              $('#tampilan').html(html);
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <button id="tombol">Klik di sini!</button>
    <div id="tampilan"></div>
  </body>
</html>

server.php

<table>
  <tr>
    <td>Nama Lengkap:</td>
    <td><?php echo $_GET['nama'] ?></td>
  </tr>
  <tr>
    <td>Alamat:</td>
    <td><?php echo $_GET['alamat'] ?></td>
  </tr>
  <tr>
    <td>Pekerjaan:</td>
    <td><?php echo $_GET['pekerjaan'] ?></td>
  </tr>
</table>

OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja

~ cheyuz@jagocoding.com

Stand By With Me,
cheyuz@jagocoding.com


About Author

Cecep Yusuf

Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.id


Comment & Discussions

  • Teguh Kristianto
    gan ane request dong. cara buat kasih konfirmasi saat ganti halaman itu gimana ya? tapi kalo misalnya cuma refresh halaman ga usah pake konfirmasi. bisa ga gan? ane coba pake onbeforeunload, tapi pas di refresh juga ada konfirmasinya.

    • Cecep Yusuf

      Oh klo untuk konfirmasi itu pasti refresh juga bakal muncul gan.. soalnya refresh juga dianggap close (unload). Jadi tetep pake onbeforeunload untuk eventnya.. Jika gak usah dimunculin di refresh, kayaknya ane blm pernah liat, hehe


  • asep saepulloh
    oh iya kang klo mau ngasih kondisi abis success gimana ya kang ?? [code=javascript] success:function(msg){ if(msg=="sudah ada"){ $("#proses").html("Data <b>"+nama+"</b> sudah ada"); $("#list_"+id+" > td").css({"color":"#333","background-color":"#FFBFBF"}); }else{ auto_refresh(); $("#proses").html("Data berhasil di update"); } } [/code] bener gitu gak sih kang ? tapi kod yang nilai truenya gak ke baca yah klo kondisinya true -___-"

    • Cecep Yusuf

      itu udah bener kok kodenya... sekarang sebelumnya coba dicek apakah isi dari [b]msg[/b] itu apakah "sudah ada" atau bukan.. coba pake alert(msg).. oh iya itu kodenya jadi emoticon ya Sep, wkwkwk... :))


    • asep saepulloh

      udah kang. ada kog isinya pas di alert(msg); munculnya sudah ada. sesuai kata" yang di servernya . hem hem gimana yah kang ? hehee.. iya ada emotnya :p


    • Cecep Yusuf

      hmm harusnya udah bener... coba ganti "sudah ada" jadi nilai aja, misalnya 1 atau 2, ada kemungkinan itu stringnya tidak match..


    • asep saepulloh

      eh iya kang. :D pas saya ganti jadi 1. malah muncul :D hehehe. makasih ya kang :D


    • Cecep Yusuf

      oh udah berhasil ya? ok sip2.. sama2 :)


  • asep saepulloh
    kang klo type nya di ganti post . apa data di isi juga ? klo di isi. di isiin apaan kang ? name dari si textboxnya atau bukan ???

  • behhh, tau ni website dari kaskus gannnn~ :D gan mau tanya dong ane coba praktekan contoh di atas untuk manggil page lain nah di page lain ini (server.php) ane ganti contentnya dengan coding yang ada jquerynya. waktu ditaro di page home.php si normal2 aja gan, NAH problemnya adalah pas ditaro di dalam page yang dipaggil oleh si ajax. nih file yang dipaggilnya. [code=CODE_LANG]<style type="text/css"> .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } </style> <script src="modernizr.js"></script> <script src="mocha/mocha.js"></script> <script>mocha.setup("bdd")</script> <script src="chai.js"></script> <script>expect = chai.expect</script> <script src="jquery.js"></script> <script src="../dist/jquery.panzoom.js"></script> <div id="pan-parent"> <div id="panzoom" style="text-align: center"> <img src="1970_L_AMPANA.jpg" width="900" height="900"> </div> </div> <div class="visuallyhidden"> <svg id="panzoom-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="900"> <rect x="400" y="400" width="100" height="100" rx="20" ry="20"></rect> </svg> </div> <button class="zoom-in">Zoom In</button> <button class="zoom-out">Zoom Out</button> <input type="range" class="zoom-range"> <button class="reset">Reset</button> <script src="bdd/test.js"></script> <script>onload = function() { mocha.run(); }</script>[/code] sedangkan ini file homenya [code=CODE_LANG]<!DOCTYPE html> <html> <head> <title>Contoh AJAX 2 - Response HTML</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $().ready(function(){ $('#tombol').click(function(){ $.ajax({ url: 'a.php', type: 'get', data: { nama: "Cecep Yusuf", alamat: "Jakarta", pekerjaan: "Programmer" }, success: function(html){ $('#tampilan').html(html); } }); }); }); </script> </head> <body> <button id="tombol">Klik di sini!</button> <div id="tampilan"></div> </body> </html>[/code] apa memang jquery tidak dapat jalan di dalam ajax gan? thx. btw ane uda coba daftar di sini cuman belum dapat konfirmasi emailnya nih gan. hihihi. :p

  • mantap kang tutornya

    dicombine dengan Laravel lancer jaya no bug ")

  • Please LOGIN before if you want to give the comment.