JSON PHP

The conventional use of JSON is to read data from the web server and then display these data on the web page.

This chapter explains how to exchange JSON data between the client and PHP server.

PHP Files

PHP provides built-in functions for handling JSON.

By using the PHP function json_encode()The object in PHP can be converted to JSON:

PHP Files

<?php
$myObj->name = "Bill Gates";
$myObj->age = 62;
$myObj->city = "Seattle";
$myJSON = json_encode($myObj);
echo $myJSON;
?>

Display the PHP file

Client-side JavaScript

This is client-side JavaScript, using AJAX calls to request the PHP file in the example above:

Example

Using JSON.parse() Convert the result to a JavaScript object:

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

Try It Yourself

PHP Array

When using the PHP function json_encode() At this time, the array in PHP will also be converted to JSON:

PHP Files

<?php
$myArr = array("Bill Gates", "Steve Jobs", "Elon Musk");
$myJSON = json_encode($myArr);
echo $myJSON;
?>

Display the PHP file

Client-side JavaScript

This is client-side JavaScript, using AJAX calls to request the PHP file in the example above:

Example

Please use JSON.parse() Convert the result to a JavaScript array:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         document.getElementById("demo").innerHTML = myObj[2];
     });
});
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

Try It Yourself

PHP Database

PHP is a server-side programming language and should be used for operations that can only be executed by the server, such as accessing the database.

Imagine that there is a database on the server, containing customer, product, and supplier data.

At this moment, you need to request the server to get the first ten records of the 'customer' table:

Example

Please use JSON.stringify() Convert a JavaScript object to JSON:

obj = { "table":"customers", "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", "demo_json_db.php?x=" + dbParam, true);
xmlhttp.send();

Try It Yourself

Example explanation:

  • Define an object that contains the 'table' attribute and the 'limit' attribute.
  • Convert this object to a JSON string.
  • Send a request to this PHP file, with JSON as a parameter.
  • Wait until the request returns a result (as JSON).
  • Display the result received from the PHP file.

View the PHP file

PHP Files

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>

PHP File Explanation:

  • Convert the request to an object using the PHP function json_decode().
  • Access the database, and fill the array with the requested data.
  • Add the array to the object using json_encode() The function returns the object as JSON.

Traverse the result

Convert the result received from the PHP file to a JavaScript object, or in this example, a JavaScript array:

Example

Using JSON.parse() Convert JSON to a JavaScript object:

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

Try It Yourself

PHP Method = POST

It is usually best to use the HTTP POST method when sending data to the server.

If you want to send an AJAX request using the POST method, please specify this method and the correct header.

The data sent to the server must now be .send(); Method parameters:

Example

obj = { "table":"customers", "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", "demo_json_db.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

Try It Yourself

The only difference in PHP files is the method of retrieving the transmitted data.

PHP Files

Using $_POST instead of $_GET:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_POST["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>