tutorial ajax jquery mengenal method get pada ajax jquery

Hai teman-teman semuanya, apa kabar semoga tetap dalam keadaan sehat, kita lanjut lagi pembahasan kita mengenai ajax jquery, pada tutorial kali ini kita akan belajar mengenal method get pada ajax jquery.

pada kasus kali ini kita akan coba merequest data dengan menggunakan method get pada ajax jquery, pertama silahakan teman-teman buat folder didalam htdoc lalu buat file index html dan ketikan script berikut ini:

<!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>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<option>Web Master</option>

<option>Web Design</option>

<option>Digital Marketing</option>

</select>

<button id="btn" > kirim </button>

</div>

</body>

</html>

saya membuat select option dan sebuah tombol serta div dengan id box untuk tempat cetak datanya, kasusnya kita akan membuat ketika kita memilih salah satu optionnya maka pilihannya akan tercetak, sekarang kita masuk pada scripting ajax jquerynya, silahkan teman-teman ketikan script berikut ini:

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#btn").click(function(){
		var text = $("#select").val();
		console.log(text)
		$.get("models/data.php", {nama: text}).done(function(data){
				$("#box").html(data)
		})
	})
})
</script>

$(document).ready(function(){

$("#btn").click(function(){

var text = $("#select").val();

console.log(text)

$.get("models/data.php", {nama: text}).done(function(data){

$("#box").html(data)

})

</script>

pertama saya mereload library dari jquery yang sudah saya download, lalu saya membuat sebuah fungsi apabila tombol dengan id btn diklik maka sya mengambil nilai pada id select dengan menggunakan method val() lalu saya cek pada bagian console.log,Â setelah itu saya menggunakan method get dimana saya meload satu buah file data.php yang ada didalam folder model, teman-teman bisa buat dulu file data.phpmya.

Setelah itu saya membuat key nama dimana nilainya adalah nilai dari variable text, dan jika berjalan maka nilai itu akan dicetak pada id box dengan method html.

oia satu lagi pada file data.php yang ada didalam folder model ketikan script berikut ini:

<?php
echo $_GET['nama'];

1 2	<?php echo $_GET['nama'];

karena kita menggunakan request get, maka kita menggunakan $_GET[“”]

jika benar hasilnya akan seperti berikut ini:

Jika saya pilih dari salah satu pilihan selectnya akan seperti ini hasilnya,

oke untuk tutorial kali ini tentanÂ mengenal method get pada ajax jquery cukup sampai sini dulu, semoga bermanfaat

Terima kasih

Mengenal Method GET pada Ajax Jquery

Facebook DUMET School

Categories