In this tutorial, we will tackle about How to Return PHP Array as JSON Data in Ajax Request. Here, I will show you a way on achieving this goal for your current or future project. I will also provide snippets for this tutorial and a sample source code that demonstrates the idea of this tutorial.
Array is a data structure that contains a collection of elements store at contiguous memory location. Each element of an Array is identified by at least one array index or key.
JSON stands for JavaScript Object Notation.It is a lightweight format for storing and transporting. Also, it is often used when data is sent from the server to a certain web page. JSON is constructed with name and value pairs and each element or data are being separated using a comma and enclosed using curly brackets {}.
To Return of Echo PHP Array as JSON Data, we will be using the application/json content-type on the header and echoing or displaying the array using json_encode function of the PHP.
Here is an example snippet for return PHP Array as JSON Data.
<?php // Set Header content type // Sample Array Data $arr = ["id":1, "data": "Sample Data Only."]; // Echo Array data as JSON ?>
Now, I will be providing a simple application that demonstrates the topic for this tutorial. The simple application displays a list of data stored in a JSON File shown in a table element. Each table row has a View Details button which triggers the jQuery Ajax Requests that getting the complete details of data. The data will be returned as a JSON Data and will be shown on the Details Display Panel below the table.
The below data is the sample JSON Data to be use in the sample application.
[{ "id":1, "name": "Mark Cooper", "address": "23 St. Here City, Anywhere, 2306", "contact": "09123456987" },{ "id":2, "name": "John Smith", "address": "6 St. Here City, Anywhere, 2306", "contact": "09789456123" },{ "id":3, "name": "Samantha Lou", "address": "14 St. Down There City, Over There, 1415", "contact": "09456987123" },{ "id":4, "name": "Cristine Lee", "address": "15 St. Down There City, Over There, 1415", "contact": "09321987456" },{ "id":5, "name": "Joshua Miller", "address": "1234 St. XXX City, XXXXXXX, 1014", "contact": "09456654123" }]
The following script is an HTML and PHP code for displaying the page elements or interface.
<div class="container-fluid py-4 my-2"> <hr class="border-light"> <div class="card rounded-0 shadow col-lg-6 col-md-10 col-sm-12 mx-auto"> <div class="card-header"> <div class="card-title"> Sample Data </div> </div> <div class="card-body"> <div class="container-fluid"> <?php $data = json_decode(file_get_contents("data.json")); ?> <table class="table table-bordered table-hover table-striped"> <colgroup> <col width="10%"> <col width="60%"> <col width="30%"> </colgroup> <thead> <tr class="bg-primary text-light"> </tr> </thead> <tbody> <?php foreach($data as $row): ?> <tr> <td class="text-center"> </td> </tr> <?php endforeach; ?> </tbody> </table> </div> </div> </div> <div class="mt-3" id="details"> <div class="card rounded-0 shadow col-lg-4 col-md-8 col-sm-12 mx-auto"> <div class="card-header rounded-0"> </div> <div class="card body rounded-0"> <div class="container-fluid"> <dl class="row"> </dl> <dl class="row"> </dl> <dl class="row"> </dl> <dl class="row"> </dl> </div> </div> </div> </div> </div>
Here's the script for executing the Ajax Request when clicking the View Details of each table rows.
$(document).ready(function(){ $('.view_details').click(function(e){ e.preventDefault(); var id = $(this).attr('data-id') $.ajax({ url:"get_data.php?id="+id, dataType:"json", error:err => { console.error(err) }, success: function(response){ $('#id').text(response.id) $('#name').text(response.name) $('#contact').text(response.contact) $('#address').text(response.address) } }) }) })
Here's the PHP Script that demonstrates how to return PHP Array as JSON Data in Ajax Request.
<?php $id = $_GET['id']; $data_array = []; foreach($data as $row){ $data_array[$row->id] = $row; } $resp = $data_array[$id]; ?>
Here's the sample snapshot for the result or output of the sample application.
The full source code of this sample application is provided on this website. To download the source code zip file, click the download button below this article.
There you have it! I hope this tutorial will help you with what you are looking for and adds up to your knowledge for developing a web application using PHP and jQuery. Explore more on this website for more Tutorials and Free Source Codes.