Haloo teman-teman? kita lanjut lagi belajarnya yah, pada tutoral sebelumnya kita telah bahas mothod get pada ajax jquery, kali ini kita akan belajar mengenal method post pada ajax jquery.
kemarin kita telah melakukan requerst data dengan menggunakan method get, bagi teman-teman yang belum membaca, teman-teman dapat membacanya pada tutorial ini https://kursuswebdesign.org/mengenal-method-get-pada-ajax-jquery/#more-8477 . nah kita bisa gunakan script yang kemarin, bagi teman-teman yang belum membuat scriptnya, silahkan teman-teman ketikan script berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax Get</title> </head> <body> <div class="container"> <select id="select" > <option>Web Master</option> <option>Web Design</option> <option>Digital Marketing</option> </select> <button id="btn" > kirim </button> <div id="box"></div> </div> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ var text = $("#select").val(); console.log(text) $.post("models/data.php", {nama: text}).done(function(data){ $("#box").html(data) }) }) }) </script> </body> </html> |
Perbedaannya adalah method yang digunakan untuk merequest datanya, kita merequest data.php yang ada di folder models, teman-teman bisa buat file data.php lalu ketikan script ini didalamnya :
|
1 2 |
<?php echo $_POST['nama']; |
dengan ini kita telah berhasil merequest data.php yang bila mana kita pilih salah satu option pada selectnya, maka akan tercetak sesuai dengan yang kita pilih,
Gimana teman-teman? mudah bukan, untuk tutorial kali ini tentang mengenal method post pada ajax jquery cukup sampai disini dulu, semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya,sampai bertemu lagi pada tutorial berikutnya,
Terima kasih