Penggunaan umum JSON adalah untuk membaca data dari server web, dan menampilkan data di halaman web.
Bab ini akan mempelajari cara menukar data JSON antara klien dan server PHP.
Section Artikel
File PHP
PHP memiliki beberapa fungsi built-in untuk menangani JSON.
Objek di 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 pada klien, menggunakan panggilan AJAX untuk meminta file PHP dari contoh di atas.
Contoh:
Gunakan JSON.parse() untuk mengonversi hasil menjadi objek JavaScript.
<!DOCTYPE html> <html> <body> <h2>Get data as JSON from a PHP file on the server.</h2> <p id="demo"></p> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "demo_file.php", true); xmlhttp.send(); </script> </body> </html>
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 hasil menjadi array JavaScript.
<!DOCTYPE html>
<html>
<body>
<h2>Dapatkan data sebagai JSON dari file PHP, dan konversikan menjadi array JavaScript.</h2>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj[2];
}
};
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();
</script>
</body>
</html>
Database PHP
PHP adalah bahasa pemrograman sisi server, dan dapat digunakan untuk mengakses database.
Anggaplah Anda memiliki database di server , dan ingin mengirim permintaan dari klien di mana meminta 10 baris pertama dalam tabel yang disebut “customers”.
Di klien, buat objek JSON yang mendeskripsikan jumlah baris yang ingin dikembalikan.
Sebelum mengirim permintaan ke server, ubah objek JSON menjadi string dan kirimkan sebagai parameter ke url halaman PHP.
Contoh:
Gunakan JSON.stringify () untuk mengubah objek JavaScript menjadi JSON
<!DOCTYPE html>
<html>
<body>
<h2> Dapatkan data sebagai JSON dari file PHP di server. </h2>
<p> JSON yang diterima dari file PHP:</p>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp;
obj = { "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();
</script>
</body>
</html>
Penjelasan Contoh:
- Tentukan objek yang berisi properti dan nilai “limit”.
- 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 pada 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 sebuah objek, dan kembalikan objek tersebut sebagai JSON menggunakan fungsi json_encode().
Ulangi Hasil
Ubah hasil yang diterima dari file PHP menjadi objek JavaScript, atau dalam kasus ini, array JavaScript:
Contoh
Gunakan JSON.parse() untuk mengubah JSON menjadi objek JavaScript.
<!DOCTYPE html>
<html>
<body>
<h2>Dapatkan data sebagai JSON dari file PHP di server.</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();
</script>
<p>Coba ubah properti "batas" dari 10 menjadi 5.</p>
</body>
</html>
Metode PHP = POST
Saat mengirim data ke server, sering kali yang terbaik adalah menggunakan metode HTTP POST.
Untuk mengirim permintaan AJAX menggunakan metode POST, tentukan metode, dan header yang benar.
Data yang dikirim ke server harus menjadi argumen ke metode send().
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Gunakan metode HTTP POST untuk mengirim data ke file PHP.</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
<p>Coba ubah properti "batas" dari 10 menjadi 5.</p>
</body>
</html>
Satu-satunya perbedaan dalam file PHP adalah metode untuk mendapatkan data yang ditransfer.
File PHP
Gunakan $ _POST daripada $ _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);
?>