Di panduan kali ini kita akan membahas mengenai Cara menggunakan Sistem GET dan POST Di Ajax JQuery, di dasarnya ada empat cara yang dapat kota gunakan bagi menjalankan request ajax diantaranya yaitu cara load, post, get, dan ajax. Namun di panduan kali ini kita akan membahas dua cara saja yakni cara GET dan POST di ajax jquery. Secara manfaat antara get dan post mempunyai manfaat yang hampir sama yaitu sama-sama berfungsi bagi mengirim data namun apabila kita menggunakan get karenanya hasil data yang dikirimkan tersebut akan terlihat di url sedangkan post data yang dikirimkan tak akan di tampilkan di url, nah begitulah perbedaan mendasar dari kedua method tersebut.
Cara menggunakan Sistem GET dan POST Di Ajax JQuery kita akan merancang sebuah contoh sederhana seperti di bawah ini :
- Langkah pertama-tama silahkan teman-teman sebuah file dengan nama php didalam file tersebut kita akan masukan script seperti dibawah 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
32
33
34
35
|
<!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>Sistem GET dan POST Di 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>
|
- Kemudian kita akan merancang sebuah file dengan nama data.php bagi menampilkan hasil dari responnya seperti di bawah ini :
|
1
2
3
|
<?php
//hasil respon yang akan kita tampilkan
echo “Sahabat memilih <strong>$_GET[nama]</strong>”;
|
Ket :
Di script diatas terdapat event onclick, jadi di ketika event tersebut kita klik karenanya manfaat yang terdapat didalamnya akan dijalankan kemudian hasil respon tersebut akan di tampilkan di file data.php, bagi  script diatas kita menggunakan method GET bagi request datanya.
Jikalau kita jalankan di browser karenanya akan terlihat hasilnya seperti di bawah ini :
Berikutnya kita pun dapat menggunakan event change bagi menjalankan hasil dari responnya seperti dibawah ini :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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);
})(Visited 40 times, 1 visits today) |
