Tutorial JS

JS RUMAH Pengenalan JS JS Dimana Keluaran JS Pernyataan JS Sintaks JS Komentar JS Variabel JS JS Let JS Const Operator JS JS Aritmatika Tugas JS Tipe Data JS Fungsi JS Objek JS Acara JS String JS Metode String JS Pencarian String JS Template String JS Nomor JS Metode Nomor JS JS Array Metode Array JS Sortir Array JS Iterasi Array JS JS Array Const Tanggal JS Format Tanggal JS Metode Dapatkan Tanggal JS Metode Penetapan Tanggal JS JS Matematika JS Acak JS Boolean Perbandingan JS Ketentuan JS Beralih JS JS Loop Untuk JS Loop Untuk Masuk JS Loop Untuk Of JS Loop Sementara Istirahat JS JS Iterable JS Set Peta JS Tipe JS Konversi Tipe JS JS Bitwise JS RegExp Kesalahan JS Lingkup JS Pengangkatan JS Mode Ketat JS JS Kata Kunci ini Fungsi Panah JS Kelas JS JS JSON Debug JS Panduan Gaya JS Praktik Terbaik JS Kesalahan JS Kinerja JS Kata-kata Cadangan JS

Versi JS

Versi JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Tepi Sejarah JS

Objek JS

Definisi Objek Properti Objek Metode Objek Tampilan Objek Aksesor Objek Konstruktor Objek Prototipe Objek Obyek Iterable Set Objek Peta Objek Referensi Objek

Fungsi JS

Definisi Fungsi Parameter Fungsi Panggilan Fungsi Panggilan Fungsi Fungsi Terapkan Penutupan Fungsi

Kelas JS

Perkenalan Kelas Warisan Kelas Kelas Statis

JS Asinkron

Panggilan Balik JS JS Asinkron JS Janji JS Async/Menunggu

JS HTML DOM

Pengenalan DOM Metode DOM Dokumen DOM Elemen DOM HTML DOM Formulir DOM CSS DOM Animasi DOM Acara DOM Pendengar Acara DOM Navigasi DOM Node DOM Koleksi DOM Daftar Node DOM

JS Browser BOM

Jendela JS Layar JS Lokasi JS Sejarah JS JS Navigator Peringatan Munculan JS Waktu JS JS Cookies

JS Web API

Pengantar API Web API Formulir Web API Riwayat Web API Penyimpanan Web API Pekerja Web API Pengambilan Web API Geolokasi Web

JS AJAX

Pengenalan AJAX AJAX XMLHttp Permintaan AJAX Tanggapan AJAX File XML AJAX AJAX PHP AJAX ASP Basis Data AJAX Aplikasi AJAX Contoh AJAX

JS JSON

Perkenalan JSON Sintaks JSON JSON vs XML Tipe Data JSON Penguraian JSON Stringify JSON Objek JSON Array JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Pemilih jQuery jQuery HTML jQuery CSS jQuery DOM

Grafik JS

Grafik JS JS Kanvas JS Plotly JS Chart.js Bagan Google JS JS D3.js

Contoh JS

Contoh JS JS HTML DOM Masukan HTML JS Objek HTML JS Acara HTML JS JS Browser Editor JS Latihan JS kuis JS Sertifikat JS

Referensi JS

Objek JavaScript Objek DOM HTML


JSON PHP


Penggunaan umum JSON adalah untuk membaca data dari server web, dan menampilkan data di halaman web.

Bab ini akan mengajarkan Anda cara bertukar data JSON antara klien dan server PHP.


File PHP

PHP memiliki beberapa fungsi bawaan untuk menangani JSON.

Objek dalam PHP dapat diubah menjadi JSON dengan menggunakan fungsi PHP json_encode() :

file PHP

<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

JavaScript Klien

Berikut adalah JavaScript di klien, menggunakan panggilan AJAX untuk meminta file PHP dari contoh di atas:

Contoh

Gunakan JSON.parse() untuk mengonversi hasilnya menjadi objek JavaScript:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();


Array PHP

Array di PHP juga akan diubah menjadi JSON saat menggunakan fungsi PHP json_encode() :

file PHP

<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

JavaScript Klien

Berikut adalah JavaScript pada klien, menggunakan panggilan AJAX untuk meminta file PHP dari contoh array di atas:

Contoh

Gunakan JSON.parse() untuk mengonversi hasilnya menjadi larik JavaScript:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

Basis Data PHP

PHP adalah bahasa pemrograman sisi server, dan dapat digunakan untuk mengakses database.

Bayangkan Anda memiliki database di server Anda, dan Anda ingin mengirim permintaan ke sana dari klien tempat Anda meminta 10 baris pertama dalam tabel yang disebut "pelanggan".

Di klien, buat objek JSON yang menjelaskan jumlah baris yang ingin Anda kembalikan.

Sebelum Anda mengirim permintaan ke server, ubah objek JSON menjadi string dan kirimkan sebagai parameter ke url halaman PHP:

Contoh

Gunakan JSON.stringify() untuk mengonversi objek JavaScript menjadi JSON:

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

Contoh menjelaskan:

  • Tentukan objek yang berisi properti dan nilai "batas".
  • Ubah objek menjadi string JSON.
  • Kirim permintaan ke file PHP, dengan string JSON sebagai parameter.
  • Tunggu hingga permintaan kembali dengan hasil (sebagai JSON)
  • Menampilkan hasil yang diterima dari file PHP.

Lihatlah file PHP:

file PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

File PHP menjelaskan:

  • Ubah permintaan menjadi objek, menggunakan fungsi PHP json_decode() .
  • Akses database, dan isi array dengan data yang diminta.
  • Tambahkan array ke objek, dan kembalikan objek sebagai JSON menggunakan fungsi json_encode() .

Gunakan Data

Contoh

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}

Metode PHP = POST

Saat mengirim data ke server, seringkali yang terbaik adalah menggunakan POSTmetode HTTP.

Untuk mengirim permintaan AJAX menggunakan POSTmetode, tentukan metode, dan header yang benar.

Data yang dikirim ke server sekarang harus berupa argumen ke send()metode:

Contoh

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text ="";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

Satu-satunya perbedaan dalam file PHP adalah metode untuk mendapatkan data yang ditransfer.

file PHP

Gunakan $_POST alih-alih $_GET:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>