Home » Jquery » Metode GET dan POST jQuery Ajax – Kode dan Contohnya

Metode GET dan POST jQuery Ajax – Kode dan Contohnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Metode jQuery get() dan post() digunakan untuk meminta data dari server dengan permintaan HTTP GET atau POST.

Permintaan HTTP: GET vs. POST

Dua metode yang umum digunakan untuk request-respons antara klien dan server adalah: GET dan POST.

  • GET – Meminta data dari sumber tertentu
  • POST – Mengirimkan data untuk diproses ke sumber daya tertentu

GET pada dasarnya digunakan untuk mendapatkan (mengambil) beberapa data dari server. Catatan: Metode GET mungkin mengembalikan data yang di-cache.

POST juga dapat digunakan untuk mendapatkan beberapa data dari server. Namun, metode POST TIDAK PERNAH menyimpan data dalam cache dan sering digunakan untuk mengirim data bersama dengan request.

Metode jQuery $.get ()

Metode $.get() digunakan untuk meminta data dari server dengan permintaan HTTP GET.

Sintaksis:

$ .get (URL, callback);

Parameter URL yang diperlukan menentukan URL yang ingin diminta.

Parameter callback opsional adalah nama fungsi yang akan dijalankan jika permintaan berhasil.

Contoh berikut menggunakan metode $.get() untuk mengambil data dari file di server:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Kirim permintaan HTTP GET ke halaman dan dapatkan kembali hasilnya</button>

</body>
</html>

Output berupa dialog box, seperti berikut :

Parameter pertama $.get() adalah URL yang ingin kita minta (“demo_test.asp”).

Parameter kedua adalah fungsi callback. Parameter callback pertama menyimpan konten halaman yang diminta dan parameter callback kedua menyimpan status permintaan.

Tip: Berikut adalah tampilan file ASP (“demo_test.asp”):

<%
response.write("This is some text from an external ASP file.")
%>

Metode jQuery $ .post ()

Metode $ .post () digunakan untuk meminta data dari server menggunakan permintaan HTTP POST.

Sintaksis:

$ .post (URL, data, callback);

Parameter URL yang diperlukan menentukan URL yang ingin diminta.

Parameter data opsional menentukan beberapa data untuk dikirim bersama dengan permintaan.

Parameter callback opsional adalah nama fungsi yang akan dijalankan jika permintaan berhasil.

Contoh berikut menggunakan metode $ .post () untuk mengirim beberapa data bersama dengan request:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("demo_test_post.asp",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Kirim permintaan HTTP POST ke halaman dan dapatkan kembali hasilnya</button>

</body>
</html>

Output akan berupa dialog box seprti berikut :

Parameter pertama $.post() adalah URL yang diminta (“demo_test_post.asp”).

Kemudian kita akan kirimkan beberapa data untuk dikirim bersama dengan permintaan (nama dan kota).

Skrip ASP di “demo_test_post.asp” membaca parameter, memprosesnya dan mengembalikan hasil.

Parameter ketiga adalah fungsi callbacl. Parameter callback pertama menyimpan konten halaman yang diminta dan parameter callback kedua menyimpan status permintaan.

Tip: Berikut adalah tampilan file ASP (“demo_test_post.asp”):

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

You may also like