Bab 18: Form Kirim Data AJAX + JSON jQuery – Mengirim Data Form ke Server Tanpa Reload

Bab 18: Form Kirim Data AJAX + JSON jQuery – Mengirim Data Form ke Server Tanpa Reload

Setelah mempelajari Latihan AJAX + JSON, bab ini akan membahas mengirim data dari form ke server menggunakan AJAX dan format JSON. Dengan teknik ini, form submit menjadi lebih cepat dan interaktif karena halaman tidak perlu di-reload.

Fitur ini sangat berguna untuk:

  • Form registrasi atau login
  • Submit komentar
  • Mengirim data ke server API
  • Membuat aplikasi web modern yang responsif

1. Struktur Form HTML

<form id="formUser">
  Nama: <input type="text" name="nama" id="nama" required><br><br>
  Umur: <input type="number" name="umur" id="umur" required><br><br>
  <button type="submit">Kirim</button>
</form>
<div id="result"></div>

2. Mengirim Data Form dengan AJAX

Gunakan method .ajax() untuk mengirim data JSON ke server.

$("#formUser").submit(function(e){
  e.preventDefault(); // mencegah reload halaman

  var formData = {
    nama: $("#nama").val(),
    umur: $("#umur").val()
  };

  $.ajax({
    url: "proses.php",      // endpoint server
    method: "POST",
    data: JSON.stringify(formData),
    contentType: "application/json",
    success: function(response){
      $("#result").html(response);
      $("#formUser")[0].reset(); // reset form setelah submit
    },
    error: function(xhr, status, error){
      alert("Terjadi kesalahan: " + error);
    }
  });
});
  • JSON.stringify(formData) → mengubah data JavaScript menjadi format JSON
  • contentType: "application/json" → memberi tahu server bahwa data dikirim dalam format JSON

3. Contoh File PHP Sederhana (proses.php)

<?php
// Ambil data JSON dari request
$data = json_decode(file_get_contents("php://input"), true);

$nama = $data['nama'];
$umur = $data['umur'];

// Simulasi proses server
echo "Data diterima: Nama = $nama, Umur = $umur";
?>
  • File PHP membaca raw JSON dari request
  • Mengembalikan response sederhana ke client

4. Contoh Lengkap Form + AJAX + JSON

<!DOCTYPE html>
<html>
<head>
  <title>Form Kirim Data AJAX + JSON jQuery</title>
</head>
<body>

<h2>Form User</h2>
<form id="formUser">
  Nama: <input type="text" name="nama" id="nama" required><br><br>
  Umur: <input type="number" name="umur" id="umur" required><br><br>
  <button type="submit">Kirim</button>
</form>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
  $("#formUser").submit(function(e){
    e.preventDefault();

    var formData = {
      nama: $("#nama").val(),
      umur: $("#umur").val()
    };

    $.ajax({
      url: "proses.php",
      method: "POST",
      data: JSON.stringify(formData),
      contentType: "application/json",
      success: function(response){
        $("#result").html(response);
        $("#formUser")[0].reset();
      },
      error: function(xhr, status, error){
        alert("Terjadi kesalahan: " + error);
      }
    });
  });
});
</script>

</body>
</html>

5. Tips dan Best Practice

  • ❌ Jangan lupa e.preventDefault() agar halaman tidak reload
  • ❌ Gunakan JSON.stringify() untuk mengirim data JSON
  • ❌ Tentukan contentType: "application/json" agar server mengenali format data
  • ❌ Selalu tangani error dengan error callback
  • ❌ Reset form setelah submit untuk pengalaman pengguna yang lebih baik

Kesimpulan

Pada Bab 18: Form Kirim Data AJAX + JSON jQuery, Anda telah mempelajari:

  • Mengambil data dari form dengan .val()
  • Mengirim data ke server dalam format JSON menggunakan .ajax()
  • Menangani response dan error dari server
  • Membuat form lebih interaktif tanpa reload halaman

Latihan ini adalah dasar penting untuk membangun aplikasi web modern yang responsif dan efisien.

Related Posts