Cara Menggunakan JSON untuk Pertukaran Data antara Website dan Server

Cara menggunakan JSON untuk pertukaran data antara website dan server perlu dipahami oleh pengembang yang membangun aplikasi berbasis web, mulai dari formulir pendaftaran, sistem login, dashboard, hingga aplikasi yang menggunakan REST API.

JSON (JavaScript Object Notation) merupakan format pertukaran data yang banyak digunakan dalam pengembangan website modern. Teknologi ini memungkinkan halaman website mengirimkan informasi ke server dan menerima respons tanpa harus memuat ulang seluruh halaman.

Dengan JSON, browser dapat mengirimkan data dalam format terstruktur melalui HTTP. Server kemudian membaca informasi tersebut, melakukan pemrosesan, dan mengembalikan hasilnya agar dapat ditampilkan kembali kepada pengguna.

Proses ini biasanya melibatkan JavaScript, Fetch API, HTTP request, serta bahasa pemrograman di sisi server seperti PHP, Node.js, atau Python.

Agar lebih mudah dipraktikkan, pembahasan berikut dimulai dari pengenalan struktur JSON hingga contoh implementasi komunikasi antara website dan server menggunakan kode yang dapat langsung dicoba.

Pengertian JSON dan Perannya dalam Komunikasi antara Website dan Server

JSON adalah singkatan dari JavaScript Object Notation, yaitu format pertukaran data berbasis teks yang digunakan untuk menyimpan dan mengirimkan informasi secara terstruktur.

Format ini menggunakan pasangan nama properti dan nilai (key-value pair) sehingga informasi dapat dibaca oleh manusia maupun diproses oleh program.

Meskipun namanya mengandung JavaScript, JSON tidak hanya digunakan dalam bahasa pemrograman tersebut. PHP, Python, Java, Go, C#, dan berbagai bahasa lainnya juga mendukung pengolahan JSON.

Dalam pengembangan website, JSON berfungsi sebagai perantara komunikasi antara bagian frontend dan backend.

Frontend merupakan bagian aplikasi yang berinteraksi langsung dengan pengguna melalui browser. Sementara itu, backend bertugas memproses permintaan, menjalankan logika aplikasi, dan berkomunikasi dengan database.

Bagaimana JSON Bekerja antara Website dan Server?

Misalnya, pengguna mengisi formulir pendaftaran pada sebuah website. Informasi yang dimasukkan berupa nama, alamat email, dan kata sandi.

JavaScript mengambil nilai dari formulir tersebut, kemudian mengubahnya menjadi format JSON. Data dikirimkan ke server menggunakan HTTP request.

Server menerima permintaan, membaca isi JSON, memvalidasi informasi, kemudian menjalankan proses pendaftaran jika seluruh persyaratan terpenuhi.

Setelah selesai, server mengirimkan respons dalam format JSON yang berisi status proses dan pesan untuk pengguna.

Secara sederhana, alur komunikasi tersebut adalah:

1. Pengguna memasukkan informasi melalui halaman website.
2. JavaScript mengambil data dari elemen formulir.
3. Data diubah menjadi format JSON.
4. Browser mengirimkan JSON menggunakan HTTP request.
5. Server menerima dan memproses informasi.
6. Server mengirimkan respons dalam format JSON.
7. JavaScript membaca respons dan memperbarui tampilan website.

Proses tersebut memungkinkan website berkomunikasi dengan server tanpa harus melakukan pemuatan ulang halaman secara keseluruhan.

Fungsi JSON dalam Pengembangan Website

JSON memiliki beberapa fungsi penting yang membuatnya banyak digunakan dalam pengembangan aplikasi berbasis web.

1. Mengirimkan data dari frontend ke backend

JSON dapat digunakan untuk mengirimkan informasi formulir, data pengguna, transaksi, maupun permintaan tertentu kepada server.

2. Menerima respons dari server

Server dapat mengirimkan informasi dalam format JSON agar mudah dibaca dan diolah menggunakan JavaScript.

3. Menghubungkan berbagai aplikasi

JSON memungkinkan aplikasi yang dibuat menggunakan bahasa pemrograman berbeda saling bertukar informasi selama keduanya memiliki mekanisme komunikasi yang sesuai.

4. Mendukung pengembangan REST API

REST API banyak menggunakan JSON sebagai format representasi data untuk operasi GET, POST, PUT, PATCH, dan DELETE.

5. Memperbarui halaman tanpa reload

Dengan bantuan Fetch API, website dapat mengambil atau mengirimkan data secara asynchronous sehingga pengguna tidak perlu menunggu seluruh halaman dimuat ulang.

Perbedaan JSON dengan XML

Sebelum JSON populer, XML sering digunakan untuk pertukaran data antar-aplikasi. Keduanya memiliki fungsi serupa, tetapi struktur dan cara penulisannya berbeda.

Aspek	JSON	XML
Format	Pasangan key-value	Tag pembuka dan penutup
Ukuran	Umumnya lebih ringkas	Cenderung lebih panjang
Pembacaan JavaScript	Mudah diproses	Memerlukan parser XML
Komentar	Tidak didukung	Didukung
Penggunaan	REST API dan aplikasi web	Sistem enterprise dan integrasi tertentu
Struktur data	Object dan array	Elemen dan atribut

JSON sering menjadi pilihan untuk aplikasi web modern karena sintaksnya sederhana dan didukung secara langsung oleh JavaScript.

Namun, XML tetap digunakan pada beberapa sistem yang membutuhkan struktur dokumen, skema, atau mekanisme pertukaran data tertentu.

Struktur Dasar JSON yang Perlu Dipahami Sebelum Mengirim Data

Sebelum mengirimkan informasi menggunakan JSON, penting untuk memahami struktur penulisannya. Kesalahan kecil seperti tanda kutip yang tidak sesuai atau koma tambahan dapat menyebabkan data gagal dibaca.

JSON memiliki beberapa tipe data utama, yaitu string, number, boolean, null, object, dan array.

Setiap tipe mempunyai fungsi berbeda sesuai informasi yang ingin disimpan atau dikirimkan.

1. Object dalam JSON

Object merupakan struktur yang berisi pasangan properti dan nilai. Penulisannya menggunakan tanda kurung kurawal {}.

Contoh JSON object:

{
  "nama": "Andi",
  "email": "andi@example.com",
  "umur": 25,
  "status": true
}

Pada contoh tersebut, terdapat empat properti, yaitu nama, email, umur, dan status.

Nama properti harus menggunakan tanda kutip ganda. Nilainya dapat berupa string, angka, boolean, null, object, maupun array.

2. Array dalam JSON

Array digunakan untuk menyimpan sekumpulan nilai dalam satu variabel. Penulisannya menggunakan tanda kurung siku [].

Contoh:

{
  "nama": "Andi",
  "hobi": [
    "Membaca",
    "Menulis",
    "Programming"
  ]
}

Properti hobi berisi tiga elemen string. Setiap elemen dapat diakses menggunakan indeks yang dimulai dari angka nol.

Array juga dapat menyimpan object jika website perlu mengirimkan kumpulan data yang lebih kompleks.

{
  "produk": [
    {
      "id": 1,
      "nama": "Laptop",
      "harga": 7500000
    },
    {
      "id": 2,
      "nama": "Keyboard",
      "harga": 350000
    }
  ]
}

Struktur seperti ini sering ditemukan pada respons API toko online, aplikasi inventaris, dan sistem manajemen produk.

3. Mengenal Tipe Data JSON

Berikut enam tipe data yang dapat digunakan dalam JSON.

Tipe Data	Contoh	Keterangan
String	"nama": "Andi"	Menyimpan teks
Number	"umur": 25	Menyimpan angka
Boolean	"aktif": true	Menyimpan true atau false
Null	"alamat": null	Menunjukkan nilai kosong
Object	"user": {"id": 1}	Menyimpan kumpulan properti
Array	"nilai": [80, 90]	Menyimpan kumpulan nilai

Perlu diperhatikan bahwa JSON tidak mendukung tipe data seperti function, undefined, dan symbol milik JavaScript.

Apabila nilai tersebut dimasukkan ke proses konversi JSON, beberapa properti dapat dihilangkan atau diubah sesuai aturan JSON.stringify().

4. Aturan Penulisan JSON yang Benar

Ada beberapa aturan yang harus diperhatikan agar JSON dapat diproses dengan benar.

• Nama properti harus menggunakan tanda kutip ganda.
• String harus menggunakan tanda kutip ganda.
• Setiap pasangan key dan value dipisahkan dengan tanda titik dua.
• Setiap properti dipisahkan menggunakan tanda koma.
• Tidak boleh ada koma tambahan setelah properti terakhir.
• Nilai boolean ditulis sebagai true atau false.
• Nilai kosong menggunakan null, bukan NULL atau undefined.

Contoh JSON yang salah:

{
  'nama': 'Andi',
  'umur': 25,
}

Kesalahan pada contoh tersebut terdapat pada penggunaan tanda kutip tunggal dan koma setelah properti terakhir.

Perbaikannya:

{
  "nama": "Andi",
  "umur": 25
}

Catatan penting: JSON harus mengikuti standar sintaks yang ketat. Berbeda dengan object literal JavaScript, JSON tidak mengizinkan komentar maupun penggunaan tanda kutip tunggal untuk string dan nama properti.

Cara Membuat dan Membaca Data JSON Menggunakan JavaScript

JavaScript menyediakan dua metode utama untuk mengolah JSON, yaitu JSON.stringify() dan JSON.parse(). Keduanya memiliki fungsi berbeda. JSON.stringify() digunakan untuk mengubah object JavaScript menjadi teks JSON, sedangkan JSON.parse() digunakan untuk mengubah teks JSON menjadi object JavaScript.

Kedua metode tersebut menjadi bagian penting dalam komunikasi antara website dan server.

1. Membuat Data JSON Menggunakan JSON.stringify()

Ketika website ingin mengirimkan informasi kepada server, data biasanya disiapkan terlebih dahulu dalam bentuk object JavaScript.

Object tersebut kemudian dikonversi menjadi string JSON menggunakan metode JSON.stringify().

Contoh:

const pengguna = {
  nama: "Andi",
  email: "andi@example.com",
  umur: 25,
  aktif: true
};

const jsonData = JSON.stringify(pengguna);

console.log(jsonData);

Hasil yang ditampilkan:

{"nama":"Andi","email":"andi@example.com","umur":25,"aktif":true}

Data yang sebelumnya berbentuk object JavaScript sekarang menjadi string JSON. Format inilah yang nantinya dapat dikirimkan melalui HTTP request menggunakan Fetch API.

2. Membaca Data JSON Menggunakan JSON.parse()

Sebaliknya, ketika website menerima teks JSON dari sumber tertentu, JavaScript perlu mengubahnya kembali menjadi object agar informasi dapat digunakan.

Proses tersebut dilakukan menggunakan JSON.parse().

Contoh:

const jsonData = '{"nama":"Andi","umur":25}';

const pengguna = JSON.parse(jsonData);

console.log(pengguna.nama);
console.log(pengguna.umur);

Hasil:

Andi
25

Setelah dikonversi, properti nama dan umur dapat diakses seperti object JavaScript biasa.

Metode ini berguna ketika data JSON diperoleh dari penyimpanan lokal, file, atau sumber lain yang memberikan teks JSON.

3. Mengakses Data JSON Berbentuk Array

Apabila JSON berisi kumpulan data, JavaScript dapat mengakses setiap elemen menggunakan indeks atau perulangan.

Contoh:

const jsonData = `[
  {
    "nama": "Andi",
    "umur": 25
  },
  {
    "nama": "Budi",
    "umur": 28
  }
]`;

const pengguna = JSON.parse(jsonData);

pengguna.forEach(function(item) {
  console.log(item.nama);
});

Hasilnya:

Andi
Budi

Metode forEach() membantu menampilkan seluruh data tanpa harus mengakses elemen satu per satu secara manual.

Dalam aplikasi nyata, teknik ini sering digunakan untuk menampilkan daftar pengguna, produk, artikel, maupun informasi dari database.

4. Menangani Kesalahan Saat Membaca JSON

Tidak semua data yang diterima memiliki format JSON valid. Server yang bermasalah, respons HTML, atau kesalahan penulisan dapat menyebabkan proses parsing gagal.

Karena itu, gunakan try...catch untuk menangani kesalahan.

const data = '{"nama":"Andi","umur":25}';

try {
  const pengguna = JSON.parse(data);

  console.log(pengguna.nama);
} catch (error) {
  console.error("JSON tidak valid:", error.message);
}

Jika format JSON salah, JavaScript tidak langsung menghentikan seluruh alur program tanpa penanganan. Sebaliknya, kesalahan dapat ditangkap dan ditampilkan melalui pesan yang lebih mudah dipahami ketika proses pengembangan.

Perlu diingat, JSON.parse() hanya digunakan untuk membaca string JSON. Jika data yang diterima sudah berbentuk object JavaScript, data tersebut tidak perlu dikonversi kembali.

Langkah Mengirim Data dari Website ke Server Menggunakan JSON dan Fetch API

Fetch API merupakan fitur JavaScript yang digunakan untuk mengirim permintaan HTTP dan menerima respons dari server. Teknologi ini dapat digunakan untuk mengambil informasi, mengirim formulir, memperbarui data, maupun menghapus informasi melalui API.

Fetch API mendukung komunikasi asynchronous sehingga browser tetap dapat menjalankan aktivitas lain selama menunggu respons server. Berikut contoh penerapan pengiriman data JSON dari halaman website ke server.

1. Membuat Formulir pada Halaman Website

Langkah pertama adalah membuat formulir yang akan digunakan untuk mengumpulkan informasi pengguna.

Contohnya, formulir sederhana yang berisi nama dan alamat email.

<form id="formPengguna">
  <label>Nama:</label>
  <input type="text" id="nama" required>

  <label>Email:</label>
  <input type="email" id="email" required>

  <button type="submit">Kirim Data</button>
</form>

<p id="hasil"></p>

Formulir tersebut memiliki dua input dan satu tombol pengiriman.

Atribut required membantu browser melakukan validasi dasar agar kolom tidak dikirim dalam keadaan kosong.

2. Mengambil Data Formulir Menggunakan JavaScript

Setelah formulir dibuat, langkah berikutnya adalah mengambil nilai yang dimasukkan pengguna.

Gunakan event submit untuk menjalankan kode ketika tombol diklik atau formulir dikirim melalui mekanisme browser.

const form = document.getElementById("formPengguna");

form.addEventListener("submit", async function(event) {
  event.preventDefault();

  const nama = document.getElementById("nama").value;
  const email = document.getElementById("email").value;

  const dataPengguna = {
    nama: nama,
    email: email
  };

  console.log(dataPengguna);
});

Fungsi event.preventDefault() mencegah browser melakukan pengiriman formulir secara tradisional yang dapat menyebabkan halaman dimuat ulang. Sementara itu, object dataPengguna digunakan untuk menampung informasi sebelum dikonversi menjadi JSON.

3. Mengubah Data Menjadi JSON

Data yang sudah dikumpulkan perlu diubah menjadi string JSON menggunakan JSON.stringify().

Tambahkan kode berikut setelah pembuatan object dataPengguna.

const jsonData = JSON.stringify(dataPengguna);

console.log(jsonData);

Hasilnya kurang lebih seperti berikut:

{
  "nama": "Andi",
  "email": "andi@example.com"
}

Dengan konversi tersebut, informasi sudah siap dimasukkan ke dalam HTTP request.

4. Mengirim JSON Menggunakan Fetch API

Langkah selanjutnya adalah mengirimkan data ke alamat endpoint server.

Endpoint merupakan alamat khusus yang disediakan backend untuk menerima permintaan dari aplikasi frontend.

Contoh implementasi:

const response = await fetch("/api/pengguna", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(dataPengguna)
});

const hasil = await response.json();

console.log(hasil);

Ada beberapa bagian penting yang perlu dipahami dari kode tersebut.

Bagian	Fungsi
fetch()	Mengirim HTTP request
/api/pengguna	Alamat endpoint server
method: POST	Mengirim data baru
Content-Type	Memberitahukan format isi request
body	Berisi data JSON yang dikirim
response.json()	Membaca respons JSON dari server

Header Content-Type: application/json sangat penting karena memberitahukan kepada server bahwa isi request menggunakan format JSON.

Tanpa header yang sesuai, backend tertentu mungkin tidak dapat membaca data sesuai mekanisme yang diharapkan.

5. Contoh Kode Lengkap Pengiriman JSON

Agar lebih mudah dipahami, berikut penggabungan proses pengambilan data formulir, konversi JSON, pengiriman request, dan penanganan respons.

const form = document.getElementById("formPengguna");
const hasil = document.getElementById("hasil");

form.addEventListener("submit", async function(event) {
  event.preventDefault();

  const dataPengguna = {
    nama: document.getElementById("nama").value.trim(),
    email: document.getElementById("email").value.trim()
  };

  try {
    hasil.textContent = "Mengirim data...";

    const response = await fetch("/api/pengguna", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(dataPengguna)
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || "Gagal mengirim data");
    }

    hasil.textContent = data.message;

    form.reset();

  } catch (error) {
    hasil.textContent = "Terjadi kesalahan: " + error.message;
  }
});

Kode tersebut sudah memiliki penanganan kesalahan dasar. Jika server mengembalikan status HTTP di luar rentang 200–299, properti response.ok akan bernilai false. Hal ini penting karena Fetch API tidak otomatis menganggap respons HTTP 400 atau 500 sebagai kegagalan Promise.

Hasil yang diharapkan: Ketika pengguna mengisi nama dan email, browser mengirimkan informasi ke endpoint /api/pengguna. Jika server menerima data, pesan keberhasilan akan ditampilkan pada halaman.

6. Contoh Menerima JSON Menggunakan PHP

Agar contoh pengiriman data dapat berjalan, server harus memiliki endpoint yang menerima request JSON.

Jika backend menggunakan PHP, data dapat dibaca menggunakan file_get_contents('php://input') dan dikonversi dengan json_decode().

Contoh file pengguna.php:

<?php

header("Content-Type: application/json");

if ($_SERVER["REQUEST_METHOD"] !== "POST") {
    http_response_code(405);

    echo json_encode([
        "success" => false,
        "message" => "Metode tidak diizinkan"
    ]);

    exit;
}

$input = file_get_contents("php://input");

$data = json_decode($input, true);

if (
    json_last_error() !== JSON_ERROR_NONE ||
    !is_array($data)
) {
    http_response_code(400);

    echo json_encode([
        "success" => false,
        "message" => "Format JSON tidak valid"
    ]);

    exit;
}

$nama = trim($data["nama"] ?? "");
$email = trim($data["email"] ?? "");

if ($nama === "" || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
    http_response_code(422);

    echo json_encode([
        "success" => false,
        "message" => "Nama atau email tidak valid"
    ]);

    exit;
}

echo json_encode([
    "success" => true,
    "message" => "Data berhasil diterima",
    "data" => [
        "nama" => $nama,
        "email" => $email
    ]
]);

Simpan file tersebut sesuai konfigurasi server, misalnya sebagai pengguna.php. Jika menggunakan PHP built-in server dan file berada dalam direktori publik proyek, endpoint dapat diakses melalui alamat seperti http://localhost:8000/pengguna.php.

Pada contoh ini, server baru menerima dan memvalidasi data. Informasi belum disimpan ke database sehingga proses penyimpanan membutuhkan implementasi tambahan.

7. Bagaimana Jika Backend Menggunakan Node.js?

Selain PHP, Node.js juga dapat digunakan untuk menerima data JSON dari website.

Dengan Express, pengembang dapat menggunakan middleware express.json() untuk membaca request dengan format JSON.

Contoh:

const express = require("express");

const app = express();

app.use(express.json());

app.post("/api/pengguna", (req, res) => {
  const { nama, email } = req.body;

  if (!nama || !email) {
    return res.status(400).json({
      success: false,
      message: "Nama dan email wajib diisi"
    });
  }

  res.status(201).json({
    success: true,
    message: "Data berhasil diterima",
    data: {
      nama,
      email
    }
  });
});

app.listen(3000, () => {
  console.log("Server berjalan di port 3000");
});

Middleware express.json() bertugas membaca request JSON dan menyediakan hasilnya melalui req.body. Jika middleware tersebut tidak dipasang sebelum route yang membutuhkannya, req.body dapat bernilai undefined.

Catatan keamanan: Data dari browser tidak boleh langsung dipercaya. Backend tetap harus melakukan validasi, autentikasi, otorisasi, dan pemeriksaan keamanan sebelum menyimpan atau memproses informasi.

Cara Mengolah Respons JSON dari Server agar Ditampilkan di Halaman Website

Setelah website mengirimkan informasi, server biasanya memberikan respons yang berisi status dan hasil pemrosesan. Respons tersebut dapat digunakan untuk menampilkan notifikasi, daftar informasi, hasil pencarian, maupun perubahan data pada halaman website.

JavaScript menyediakan mekanisme untuk membaca respons tersebut melalui Fetch API.

1. Membaca Respons JSON dari Server

Untuk membaca respons JSON, gunakan metode response.json().

Contoh:

fetch("/api/pengguna")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Terjadi kesalahan:", error);
  });

Metode response.json() membaca isi respons dan mengubahnya menjadi object JavaScript. Setelah proses selesai, informasi dapat diakses melalui properti yang tersedia dalam respons server.

2. Mengambil Nilai dari Respons JSON

Misalnya, server mengirimkan data seperti berikut:

{
  "success": true,
  "message": "Data berhasil ditemukan",
  "pengguna": {
    "nama": "Andi",
    "email": "andi@example.com",
    "status": "Aktif"
  }
}

JavaScript dapat mengambil setiap informasi menggunakan nama properti.

fetch("/api/pengguna")
  .then(response => response.json())
  .then(data => {
    console.log(data.message);
    console.log(data.pengguna.nama);
    console.log(data.pengguna.email);
    console.log(data.pengguna.status);
  });

Cara tersebut memudahkan pengembang mengambil informasi tertentu tanpa perlu membaca seluruh isi respons secara manual.

3. Menampilkan Data JSON ke Halaman HTML

Informasi dari server dapat ditampilkan langsung pada elemen HTML menggunakan JavaScript.

Contoh HTML:

<div id="profil"></div>

Kemudian tambahkan JavaScript berikut:

fetch("/api/pengguna")
  .then(response => {
    if (!response.ok) {
      throw new Error("Gagal mengambil data");
    }

    return response.json();
  })
  .then(data => {
    const profil = document.getElementById("profil");

    profil.textContent =
      `Nama: ${data.pengguna.nama} | Email: ${data.pengguna.email}`;
  })
  .catch(error => {
    document.getElementById("profil").textContent =
      error.message;
  });

Pada contoh tersebut, data nama dan email akan ditampilkan pada halaman website setelah server memberikan respons.

Penggunaan textContent juga lebih aman untuk menampilkan teks dari server dibandingkan memasukkan data yang tidak dipercaya menggunakan innerHTML.

4. Menampilkan Kumpulan Data JSON Menggunakan Perulangan

Dalam aplikasi nyata, server sering mengirimkan kumpulan data dalam bentuk array.

Contohnya adalah daftar produk, daftar pengguna, atau kumpulan artikel.

Misalnya, server memberikan respons berikut:

{
  "success": true,
  "produk": [
    {
      "id": 1,
      "nama": "Laptop",
      "harga": 7500000
    },
    {
      "id": 2,
      "nama": "Mouse",
      "harga": 150000
    },
    {
      "id": 3,
      "nama": "Keyboard",
      "harga": 350000
    }
  ]
}

Untuk menampilkan seluruh produk, gunakan perulangan forEach().

fetch("/api/produk")
  .then(response => {
    if (!response.ok) {
      throw new Error("Gagal mengambil produk");
    }

    return response.json();
  })
  .then(data => {
    const daftar = document.getElementById("daftarProduk");

    daftar.replaceChildren();

    data.produk.forEach(produk => {
      const item = document.createElement("p");

      item.textContent =
        `${produk.nama} - Rp${produk.harga.toLocaleString("id-ID")}`;

      daftar.appendChild(item);
    });
  })
  .catch(error => {
    console.error(error);
  });

Kode tersebut membuat elemen HTML untuk setiap produk berdasarkan data yang diterima dari server. Keuntungan pendekatan ini adalah daftar produk dapat diperbarui secara otomatis ketika server memberikan informasi terbaru.

5. Menangani Respons HTTP dan Kesalahan JSON

Salah satu kesalahan yang sering terjadi adalah menganggap semua respons server selalu berbentuk JSON valid. Padahal, server dapat mengembalikan halaman HTML ketika terjadi kesalahan, misalnya HTTP 404 atau 500. Jika browser tetap menjalankan response.json(), proses parsing dapat gagal karena isi respons bukan JSON.

Berikut contoh penanganan yang lebih aman:

async function ambilData() {
  try {
    const response = await fetch("/api/pengguna");

    if (!response.ok) {
      throw new Error(
        `HTTP Error: ${response.status}`
      );
    }

    const contentType =
      response.headers.get("content-type") || "";

    if (!contentType.includes("application/json")) {
      throw new Error("Respons server bukan JSON");
    }

    const data = await response.json();

    console.log(data);

  } catch (error) {
    console.error("Gagal mengambil data:", error.message);
  }
}

ambilData();

Pemeriksaan status HTTP membantu mengetahui apakah permintaan berhasil diproses oleh server.

Sementara itu, pemeriksaan Content-Type membantu memastikan bahwa respons yang diterima memang menggunakan format JSON.

6. Penyebab JSON Tidak Bisa Dikirim atau Dibaca

Jika proses pertukaran data tidak berjalan, ada beberapa penyebab yang perlu diperiksa.

Masalah	Penyebab	Solusi
Unexpected token	Format JSON tidak valid	Periksa sintaks JSON
req.body undefined	Middleware JSON belum dipasang	Gunakan express.json()
HTTP 404	Endpoint tidak ditemukan	Periksa URL API
HTTP 405	Metode HTTP tidak sesuai	Periksa GET, POST, atau metode lainnya
HTTP 400	Request tidak valid	Periksa struktur data dan validasi server
CORS error	Kebijakan akses lintas origin	Atur konfigurasi CORS di server
Failed to fetch	Gangguan jaringan atau koneksi	Periksa server dan koneksi internet
HTTP 500	Terjadi kesalahan backend	Periksa log server

7. Mengatasi Masalah CORS Saat Mengirim JSON

CORS atau Cross-Origin Resource Sharing merupakan mekanisme keamanan browser yang mengatur apakah suatu website boleh mengakses sumber daya dari origin berbeda.

Sebagai contoh, halaman website berjalan di http://localhost:5500, sedangkan backend berada di http://localhost:3000.

Kedua alamat tersebut memiliki origin berbeda karena port yang digunakan tidak sama.

Ketika website mengirim request JSON menggunakan metode POST dan header Content-Type: application/json, browser dapat melakukan permintaan pemeriksaan awal atau preflight request menggunakan metode OPTIONS.

Server harus memberikan konfigurasi CORS yang sesuai agar browser mengizinkan komunikasi tersebut.

Jika menggunakan Express, salah satu cara mengaturnya adalah memasang middleware cors.

const express = require("express");
const cors = require("cors");

const app = express();

app.use(cors({
  origin: "http://localhost:5500"
}));

app.use(express.json());

Pengaturan tersebut mengizinkan origin yang ditentukan untuk mengakses server.

Untuk lingkungan produksi, gunakan daftar origin yang benar-benar dipercaya. Hindari membuka akses ke semua website tanpa mempertimbangkan kebutuhan keamanan aplikasi.

8. Tips Keamanan Saat Menggunakan JSON

JSON hanya merupakan format pertukaran data, bukan mekanisme keamanan. Karena itu, pengembang tetap harus melindungi informasi yang dikirimkan antara browser dan server.

Beberapa hal yang perlu diperhatikan:

• Gunakan HTTPS agar komunikasi data terenkripsi selama perjalanan antara browser dan server.
• Validasi setiap input di backend, meskipun frontend sudah melakukan pemeriksaan.
• Jangan mengirimkan kata sandi atau informasi sensitif melalui URL.
• Gunakan autentikasi dan otorisasi untuk endpoint yang membutuhkan akses terbatas.
• Hindari menampilkan token, API key, dan informasi rahasia dalam JavaScript frontend.
• Batasi ukuran request agar server tidak menerima data berlebihan.
• Gunakan textContent ketika menampilkan teks yang berasal dari sumber tidak tepercaya.
• Jangan mempercayai nilai ID, harga, atau hak akses hanya karena dikirim dari browser.

Satu hal yang perlu diingat, pengguna dapat memodifikasi request melalui Developer Tools, browser extension, atau aplikasi HTTP client.

Oleh sebab itu, semua pemeriksaan penting harus dilakukan kembali di sisi server.

FAQ Seputar Cara Menggunakan JSON untuk Pertukaran Data antara Website dan Server

1. Apa fungsi JSON dalam komunikasi antara website dan server?

JSON berfungsi sebagai format pertukaran informasi antara frontend dan backend. Website dapat mengirimkan data melalui HTTP request, sedangkan server memberikan hasil pemrosesan dalam bentuk respons JSON yang dapat dibaca JavaScript.

2. Apakah JSON hanya bisa digunakan dengan JavaScript?

Tidak. JSON dapat digunakan oleh berbagai bahasa pemrograman seperti PHP, Python, Java, C#, Go, dan Ruby. Format ini bersifat independen sehingga aplikasi dengan teknologi berbeda tetap dapat bertukar informasi.

3. Apa perbedaan JSON.stringify() dan JSON.parse()?

JSON.stringify() digunakan untuk mengubah object JavaScript menjadi string JSON. Sementara itu, JSON.parse() digunakan untuk mengubah string JSON menjadi object JavaScript agar datanya dapat diakses dan diproses kembali.

4. Mengapa Fetch API sering digunakan untuk mengirim JSON?

Fetch API menyediakan cara sederhana untuk mengirim HTTP request dan menerima respons server secara asynchronous. Dengan demikian, website dapat memperbarui informasi tanpa harus memuat ulang seluruh halaman.

5. Apa fungsi Content-Type: application/json?

Header tersebut memberi tahu server bahwa isi request menggunakan format JSON. Server kemudian dapat menentukan cara membaca dan memproses data yang dikirimkan oleh browser.

6. Apakah JSON bisa digunakan untuk mengirim data ke database?

Bisa, tetapi JSON tidak berkomunikasi langsung dengan database dalam implementasi website pada umumnya. Browser mengirim JSON ke backend, kemudian backend melakukan validasi dan menjalankan query database sesuai kebutuhan.

7. Apa penyebab JSON tidak bisa dibaca oleh JavaScript?

Penyebabnya dapat berupa sintaks JSON yang salah, tanda kutip tidak sesuai, respons server berbentuk HTML, atau data yang diterima bukan string JSON. Periksa respons melalui Developer Tools dan gunakan try...catch untuk menangani kesalahan parsing.

Kesimpulan

JSON merupakan format pertukaran data yang memudahkan website dan server berkomunikasi secara terstruktur. Teknologi ini banyak digunakan dalam REST API, aplikasi berbasis JavaScript, sistem login, formulir online, hingga dashboard yang membutuhkan pembaruan informasi secara dinamis.

Untuk menggunakannya, pengembang perlu memahami struktur JSON, mengolah data menggunakan JSON.stringify() dan JSON.parse(), serta mengirimkan informasi melalui Fetch API.

Pada sisi server, data harus diterima, divalidasi, dan diproses menggunakan backend seperti PHP atau Node.js. Hasilnya kemudian dikembalikan dalam bentuk JSON agar dapat dibaca dan ditampilkan kembali oleh JavaScript.

Hal terpenting adalah memastikan endpoint, metode HTTP, header, dan struktur respons sudah sesuai. Jangan lupa menerapkan validasi backend, HTTPS, serta pengaturan CORS yang tepat agar komunikasi data berjalan lancar dan aman.

Dengan memahami alur tersebut, pengembang dapat membangun website yang lebih interaktif, responsif, dan mudah diintegrasikan dengan berbagai layanan API.