JavaScript JSON PHP

JSON with PHP

A common use of JSON is to read data from a web server and display it on a web page.

This guide will teach you how to exchange JSON data between the client and a PHP server.

The PHP File

PHP has built-in functions to handle JSON. Objects in PHP can be converted into JSON using json_encode():

PHP File:

<?php$myObj = new stdClass();$myObj->name = "John";$myObj->age = 30;$myObj->city = "New York";‍$myJSON = json_encode($myObj);‍echo $myJSON;?>‍

The Client JavaScript

Here is a JavaScript example using an AJAX call to request the PHP file from the above example:

Example:

Use JSON.parse() to convert the result into a JavaScript object:

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();

PHP Array

Arrays in PHP will also be converted into JSON using json_encode():

PHP File:

<?php$myArr = array("John", "Mary", "Peter", "Sally");‍$myJSON = json_encode($myArr);‍echo $myJSON;?>

‍

The Client JavaScript

Here is a JavaScript example using an AJAX call to request the PHP file from the array example above:

Example:

Use JSON.parse() to convert the result into a JavaScript array:

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

PHP Database

PHP can be used to access a database. Suppose you have a database on your server and want to send a request from the client to fetch the first 10 rows in a table called "customers".

On the client, create a JSON object that describes the number of rows you want to return.

Before sending the request to the server, convert the JSON object into a string and send it as a parameter to the URL of the PHP page:

Example:

Use JSON.stringify() to convert the JavaScript object into JSON:

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

‍

Example Explained:

1. Define an object containing a "limit" property and value.
2. Convert the object into a JSON string.
3. Send a request to the PHP file with the JSON string as a parameter.
4. Wait until the request returns with the result (as JSON).
5. Display the result received from the PHP file.

PHP File

PHP File:

<?phpheader("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);?>

‍

PHP File Explained:

1. Convert the request into an object using json_decode().
2. Access the database and fill an array with the requested data.
3. Return the array as JSON using json_encode().

Use the Data

Example:

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;};

‍

PHP Method = POST

When sending data to the server, it is often best to use the HTTP POST method. To send AJAX requests using the POST method, specify the method and the correct header.

Example:

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);

‍

The only difference in the PHP file is the method for getting the transferred data. Use $_POST instead of $_GET:

PHP File:

<?phpheader("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);?>

‍