Scribd Logo
Unggah

Selamat datang di Scribd!

  • 9 tayangan

    Kelas JQuery 3 Ajax With JQuery

    Diunggah oleh

    Rizal Maulana
    jquery

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas

    Anda mungkin juga menyukai

    Kelas JQuery 3 Ajax With JQuery

    Diunggah oleh

    Rizal Maulana
    9 tayangan4 halaman
    jquery

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    jquery

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    9 tayangan4 halaman

    Kelas JQuery 3 Ajax With JQuery

    Diunggah oleh

    Rizal Maulana
    jquery

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    MODUL III JQUERY KELAS ZEROZERO

    AJAX with JQuery


    Training Online Ilmuwebsite
    http://www.ilmuwebsite.com

    Lisensi Dokumen:
    Copyright 2014-2015 Ilmuwebsite.Com
    Untuk semua kalangan, silahkan menyebarluaskan sebagian atau seluruh isi dokumen ini.

    Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data,
    menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.
    Banyak cara juga untuk dapat menghasilkan ajax ini, ada develepor yang membuat engine
    sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin,
    seperti jquery misalnya.
    Di tutorial kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax
    menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti
    syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial
    saya sebelumnya tentang pengenalan jquery.
    Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan
    untuk mengirimdata, kemudian file yang digunakan untuk menerima data ataupun memproses
    data, dan yang terakhir adalah jquery librarynya itu sendiri.
    Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta name="" content="">
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#ajaxTest').submit(function(eve){
    eve.preventDefault();
    $.ajax({
    url: "/function.php",
    1|Page

    type: "POST",
    dataType: "html",
    data: $(this).serialize(),
    beforeSend: function(){
    $('#waiting').text('Mohon Tunggu
    Sebentar').fadeIn('slow');
    },
    success: function(html){
    $('#waiting').fadeOut('slow');
    $('#result').text(html).fadeIn('slow').fadeOut('slow').fade
    In('slow');
    }
    });
    });
    });
    </script>
    </head>
    <body>
    <form method="POST" id="ajaxTest">
    <input type="input" name="ajaxInput" />
    <input type="submit" name="ajaxBtn" value="Test
    Button" />
    </form>
    <div id="waiting"></div>
    <div id="result"></div>
    </body>
    </html>

    Selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :
    <?php
    echo $_POST['ajaxInput'];
    ?>
    dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4.
    Yang perlu disorot adalah jquery script yang ada dibagian headnya :
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#ajaxTest').submit(function(eve){
    eve.preventDefault();
    2|Page

    $.ajax({
    url: "/function.php",
    type: "POST",
    dataType: "html",
    data: $(this).serialize(),
    beforeSend: function(){
    $('#waiting').text('Mohon Tunggu
    Sebentar').fadeIn('slow');
    },
    success: function(html){
    $('#waiting').fadeOut('slow');
    $('#result').text(html).fadeIn('slow').fadeOut('slow').fade
    In('slow');
    }
    });
    });
    });
    </script>
    jquery action selalu diawali dengan
    $(document).ready(function(){
    dan di akhiri dengan
    });
    kemudian baris selanjutnya adalah :
    $('#ajaxTest').submit(function(eve){
    eve.preventDefault();
    ini berarti submit form yang tadinya disubmit secara langsung ke action formnya dialihkan
    dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman
    action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.
    kemudian baris selanjutnya adalah :
    $.ajax({
    url: "/function.php",
    type: "POST",
    dataType: "html",
    data: $(this).serialize(),
    3|Page

    url berisi halaman penerima data yang akan dikirim, kemudian type POST artinya method yg
    digunakan dalam form adalah POST, dataType HTML kita lewat saja, dan yang terakhir adalah
    data: ($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada
    dalam form.
    sedangkan baris selanjutnya penulis yakin Anda sudah paham maknanya,
    beforeSend: function(){
    $('#waiting').text('Mohon Tunggu Sebentar').fadeIn('slow');
    },
    success: function(html){
    $('#waiting').fadeOut('slow');
    $('#result').text(html).fadeIn('slow').fadeOut('slow').fade
    In('slow');
    }

    Oke, selamat mencoba artikel ajax dengan php dan jquery.

    4|Page

    Anda mungkin juga menyukai