Cara menggunakan Metode GET dan POST Pada Ajax JQuery

Pada tutorial kali ini kita akan membahas tentang Cara menggunakan Metode GET dan POST Pada Ajax JQuery, pada dasarnya ada empat metode yang dapat kota gunakan untuk melakukan request ajax diantaranya yaitu metode load, post, get, dan ajax. Namun pada tutorial kali ini kita akan membahas dua metode saja yakni metode GET dan POST pada ajax jquery. Secara fungsi antara get dan post memiliki fungsi yang hampir sama yaitu sama-sama berfungsi untuk mengirim data namun jika kita menggunakan get maka hasil data yang dikirimkan tersebut akan terlihat pada url sedangkan post data yang dikirimkan tidak akan di tampilkan pada url, nah itulah perbedaan dasar dari kedua method tersebut.

Cara menggunakan Metode GET dan POST Pada Ajax JQuery kita akan membuat sebuah contoh sederhana seperti di bawah ini :

Langkah pertama silahkan teman-teman sebuah file dengan nama php didalam file tersebut kita akan masukan script seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>POST dan GET</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<h2>Metode GET dan POST Pada Ajax JQuery</h2>
		<select id="select">
			<option>Data Satu</option>
			<option>Data Dua</option>
			<option>Data Tiga</option>
		</select>
		<br>
		<br>
		<div class="bg-info" id="box"></div>
		<button id="btn" class="btn btn-sm btn-danger">ambil data</button>
	</div>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#btn').click(function(){
				var text = $("#select").val();
				console.log(text);
				$.get("models/data.php", {nama: text}) // request get -> menentukan nama url -> data yang dikirimkan
				.done(function(data){
					$("#box").html(data);
				});
			})

		})
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Metode GET dan POST Pada Ajax JQuery</h2>

</select>

<br>

<button id="btn" class="btn btn-sm btn-danger">ambil data</button>

</div>

$(document).ready(function(){

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

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

console.log(text);

$.get("models/data.php", {nama: text}) // request get -> menentukan nama url -> data yang dikirimkan

.done(function(data){

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

});

})

</script>

</body>

</html>

Kemudian kita akan membuat sebuah file dengan nama data.php untuk menampilkan hasil dari responnya seperti di bawah ini :

<?php 
	//hasil respon yang akan kita tampilkan
	echo "Anda memilih <strong>$_GET[nama]</strong>";

<?php

//hasil respon yang akan kita tampilkan

echo "Anda memilih <strong>$_GET[nama]</strong>";

Ket :

Pada script diatas terdapat event onclick, jadi pada saat event tersebut kita klik maka fungsi yang terdapat didalamnya akan dijalankan kemudian hasil respon tersebut akan di tampilkan pada file data.php, untuk Â script diatas kita menggunakan method GET untuk request datanya.

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti di bawah ini :

Berikutnya kita juga bisa menggunakan event change untuk menjalankan hasil dari responnya seperti dibawah ini :

<script type="text/javascript">
		$(document).ready(function(){
			$('#select').change(function(){
				var text = $(this).val();
				console.log(text);
				$.post("models/data_post.php", {nama: text}) // request post -> menentukan nama url -> data yang dikirimkan
				.done(function(data){
					$("#box").html(data);
				});
			})

		})
	</script>

$(document).ready(function(){

$('#select').change(function(){

var text = $(this).val();

console.log(text);

$.post("models/data_post.php", {nama: text}) // request post -> menentukan nama url -> data yang dikirimkan

.done(function(data){

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

});

})

</script>

Selanjutnya untuk hasil requestnya seperti dibawah ini :

<?php 
	//hasil respon yang akan kita tampilkan menggunakan $_POST
	echo "Anda memilih <strong>$_POST[nama]</strong>";

<?php

//hasil respon yang akan kita tampilkan menggunakan $_POST

echo "Anda memilih <strong>$_POST[nama]</strong>";

Jika kita jalankan pada browser kemudian jika kita pilih data yang terdapat pada select optionnya maka data tersebut akan di tampilkan seperti di bawah ini :

Oke teman-teman itulah pembahasan kita tentang Cara menggunakan Metode GET dan POST Pada Ajax JQuery.

Semoga bermanfaat.

Terima kasih.

Cara menggunakan Metode GET dan POST Pada Ajax JQuery

Facebook DUMET School

Konsultasi Gratis

Categories