DONATE  
MENU
JAVASCRIPT
HTML
JSON
AJAX

JSON Tutorials

INTRODUCTION

» Introduction To JSON

» JSON Format

» JSON Practical Examples

.. » JSON » Introduction » JSON Practical Examples
Share Tweet WhatsApp

JSON Practical Examples

To practically demonstrate the sending and receiving of data in the JSON format, we are going to create two examples below. These examples will demonstrate how JavaScript can send data in the JSON format to another programming language for processing and as well, receive data in the JSON format from another programming language to process. Example 1 In this example, we shall be sending data encoded in the JSON format to a PHP script. This PHP script is in turn required to decode the data and send back some feedback. json_php_20210405035028.php - The PHP script receiving the JSON data
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
$data = $_POST["data"]; //data in JSON string
$jsondata = json_decode($data); //PHP converts from JSON string to a its standard
echo $jsondata->name." is ".$jsondata->age." years old. He lives at ".$jsondata->address."."; //outputs data
}
?>

Copy SEE RESULT

json_example_20210405035840.html - The webpage sending the JSON encoded data
<div id='info'></div>
<script>
var data = {name: "Mr. Lawrence", age: 56, address: "No. 52, NV pavilion, Nexdoria"}; //data
data = JSON.stringify(data); //encoding in JSON string
var http = new XMLHttpRequest(); //http request object
http.open("POST", "json_php_20210405035028.php");
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.send("data="+data);
http.onreadystatechange = function (){
if (this.readyState == 4 && this.status == 200){
document.getElementById("info").innerText = this.responseText; //outputting the data retrieved from the PHP file
}
}
</script>

Copy PRACTICE IT

As can be seen above, using the JSON format, we were able to send data for another programming language (PHP) to process easily. Example 2 In this example, we shall be receiving data encoded in the JSON format from a PHP script. This PHP script will arrange the data as per JSON standard and encode it while JavaScript will receive and decode it.
<?php
$msg_details = [sender => "Mrs. Benjamin", msg => "Hello, \nCan I and my family come over this weekend for a vacation?", time_sent => "2:45pm 01/01/2020"]; //PHP associative array
$msgjson = json_encode($msg_details); //PHP encodes array in JSON string format
echo $msgjson; //outputs array
?>

Copy SEE RESULT

<div>
<div id='msg_info'></div>
<div style='margin-left:2%;' id='msg'></div>
</div>
<script>
var http = new XMLHttpRequest(); //http.request object
http.open("POST", "json_php_20210405041740.php");
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.send();
http.onreadystatechange = function (){
if (this.readyState == 4 && this.status == 200){
var msg_details = this.responseText; //received JSON string
msg_details = JSON.parse(msg_details); //converts string to JavaScript object

//USING/ACCESSING/OUTPUTTING OBJECT VALUES
document.getElementById("msg_info").innerHTML = "<b>"+msg_details['sender']+"</b> ° "+msg_details['time_sent'];
document.getElementById("msg").innerHTML = msg_details['msg'];
}
}
</script>

Copy PRACTICE IT

As can be seen above, using the JSON format, a programming language (PHP) was able to encode data in the JSON format which JavaScript was able to receive swiftly and process easily. In conclusion, JSON is very important not just in JavaScript programming but in all other programming languages. It offers an opportunity to send and receive data within and across languages (frontend and backend).
Take a short quiz on JSON Practical Examples.
Ask a question or tell us if JSON Practical Examples is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode