crematedguy
Dependency Manager
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
If you are looking for a tutorial on How to Read JSON Data in PHP using jQuery then you are at the right place. Using jQuery you can construct less of source code but you can have more function. We all know that JSON is easy to understand, so let’s see how to display JSON data, and how we are going to disintegrate JSON into HTML Table, so let’s begin.
You will learn:
Creating Table and Data
We are going to create MySQL Data for this tutorial and we will convert it into JSON format later, so kindly copy and paste this following data into your PHPMyAdmin.
JSON jQuery Script
This simple JSON script has three parameters, one is the URL, the second is our Data, and the Success use this if the request succeeds to the server.
$.getJSON
(
url,
data,
success)
;
Complete Source Code for JSON Script
This is the complete source code for JSON script, as you can see the code, it can calls PHP file and let’s disintegrate the JSON data into HTML table.
Simple HTML Table
In this table, we have id name of “data_OfJSON” that we are going to disintegrate and displayed the JSON data.
PHP Source Code Sample
This simple PHP source code which we have MySQL rows that converted to JSON format and we can convert it easily using json_encode
(
)
and we have the main root object it’s called “tutorials_post”.
Database Connection
This is database connection to connect to the database, where we can get our data to displayed, and we have “json_tutorial” our database name and our table is “tbl_posts”.
Output
This is the result after disintegrating the JSON file to HTML table data as shown in the image below.
Kindly click the "Download Code" button below for full source code. Thank you very much.
Hope that this simple tutorial that I created may help you to your future projects. Also, for the beginners who want to learn basic of coding in PHP/MySQL, JSON, and jQuery.
If you are interested in programming, we have an example of programs that may help you even just in small ways.
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Download
You will learn:
- Creating a simple table in HTML.
- Creating Database Connection.
- Constructing PHP query.
- A creating script where the JSON file and the Data table found.
Creating Table and Data
We are going to create MySQL Data for this tutorial and we will convert it into JSON format later, so kindly copy and paste this following data into your PHPMyAdmin.
- --
- -- Database: `json_tutorial`
- --
- -- --------------------------------------------------------
- --
- -- Table structure for table `tbl_posts`
- --
- CREATE
TABLE
`tbl_posts`
(
- `postID`
INT
(
11
)
NOT
NULL
,
- `post_Title`
VARCHAR
(
255
)
NOT
NULL
,
- `post_Url`
VARCHAR
(
255
)
NOT
NULL
- )
ENGINE=
MyISAM DEFAULT
CHARSET=
latin1;
- --
- -- Dumping data for table `tbl_posts`
- --
- INSERT
INTO
`tbl_posts`
(
`postID`
,
`post_Title`
,
`post_Url`
)
VALUES
- (
1
,
'Date and Time of Last Visit'
,
'http://www.sourcecodester.com/tutorials/javascript/9469/date-and-time-last-visit.html'
)
,
- (
2
,
'Digital Clock using jQuery'
,
'http://www.sourcecodester.com/tutorials/javascript/10606/digital-clock-using-jquery.html'
)
,
- (
3
,
'Contact Form with Captcha Confirmation using PDO in PHP'
,
'http://www.sourcecodester.com/tutor...-form-captcha-confirmation-using-pdo-php.html'
)
,
- (
4
,
'Color Effect in Text using JavaScript'
,
'http://www.sourcecodester.com/tutorials/javascript/10601/color-effect-text-using-javascript.html'
)
,
- (
5
,
'Bootstrap Wizard Registration using PHP/MySQL'
,
'http://www.sourcecodester.com/tutorials/php/10235/how-create-wizard-registration-using-php.html'
)
,
- (
6
,
'How to Show and Hide Menu'
,
'http://www.sourcecodester.com/tutorials/other/10206/how-show-and-hide-menu.html'
)
,
- (
7
,
'If, Else, Else If Statement using JavaScript'
,
'http://www.sourcecodester.com/tutor...-else-else-if-statement-using-javascript.html'
)
,
- (
8
,
'How to Create Quick Search using PHP/MySQL with jQuery'
,
'http://www.sourcecodester.com/tutorials/php/10592/how-create-quick-search-using-phpmysql-jquery.html'
)
,
- (
9
,
'Confirmation Alert Box using JavaScript'
,
'http://www.sourcecodester.com/tutor.../confirmation-alert-box-using-javascript.html'
)
,
- (
10
,
'Members Information System using PHP/MySQL'
,
'http://www.sourcecodester.com/tutorials/php/10586/members-information-system-using-phpmysql.html'
)
;
JSON jQuery Script
This simple JSON script has three parameters, one is the URL, the second is our Data, and the Success use this if the request succeeds to the server.
$.getJSON
(
url,
data,
success)
;
Complete Source Code for JSON Script
This is the complete source code for JSON script, as you can see the code, it can calls PHP file and let’s disintegrate the JSON data into HTML table.
- <
script type=
"text/javascript"
>
- $(
document)
.ready
(
function
(
)
{
- var
url=
"getjson.php"
;
// PHP File
- //var url="getposts.json"; // JSON File
- $.getJSON
(
url,
function
(
data)
{
- console.log
(
data)
;
- $.each
(
data.tutorials_post
,
function
(
i,
post)
{
- var
newRow =
- "<tr>"
- +
"<td>"
+
post.post_Title
+
"</td>"
- +
"<td><a href='"
+
post.post_Url
+
"'>Visit</a></td>"
- +
"</tr>"
;
- $(
newRow)
.appendTo
(
"#data_OfJSON"
)
;
- }
)
;
- }
)
;
- </
script>
Simple HTML Table
In this table, we have id name of “data_OfJSON” that we are going to disintegrate and displayed the JSON data.
- <div
class
=
"container"
>
- <div
class
=
"page-header"
style
=
"text-align:center;"
>
- <h2
>
- <a
href
=
"http://www.sourcecodester.com/"
>
- How to Read JSON Data in PHP
- </
a
>
- </
h2
>
- </
div
>
- <div
class
=
"table-responsive"
>
- <table
id
=
"data_OfJSON"
class
=
"table table-bordered table-hover"
>
- <tr
>
- <th
style
=
"color:blue;"
>
Tutorial Title</
th
>
- <th
style
=
"color:blue;"
>
Tutorial Url</
th
>
- </
tr
>
- </
table
>
- </
div
>
- </
div
>
PHP Source Code Sample
This simple PHP source code which we have MySQL rows that converted to JSON format and we can convert it easily using json_encode
(
)
and we have the main root object it’s called “tutorials_post”.
- <?php
- require_once
'db.php'
;
- $posts
=
array
(
)
;
- $query
=
"SELECT * FROM tbl_posts"
;
- $statement
=
$db_con
->
prepare
(
$query
)
;
- $statement
->
execute
(
)
;
- while
(
$row
=
$statement
->
fetch
(
PDO::
FETCH_ASSOC
)
)
{
- $posts
[
'tutorials_post'
]
[
]
=
$row
;
- }
- echo
json_encode
(
$posts
)
;
- ?>
Database Connection
This is database connection to connect to the database, where we can get our data to displayed, and we have “json_tutorial” our database name and our table is “tbl_posts”.
- <?php
- $database_hostname
=
"localhost"
;
- $database_user
=
"root"
;
- $database_password
=
""
;
- $database_name
=
"json_tutorial"
;
- try{
- $database_connection
=
new
PDO(
"mysql:host={$database_hostname}
;dbname={$database_name}
"
,
$database_user
,
$database_password
)
;
- }
catch(
PDOException $z
)
{
- die
(
$z
->
getMessage
(
)
)
;
- }
- ?>
Output
This is the result after disintegrating the JSON file to HTML table data as shown in the image below.
Kindly click the "Download Code" button below for full source code. Thank you very much.
Hope that this simple tutorial that I created may help you to your future projects. Also, for the beginners who want to learn basic of coding in PHP/MySQL, JSON, and jQuery.
If you are interested in programming, we have an example of programs that may help you even just in small ways.
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Download
You must upgrade your account or reply in the thread to view the hidden content.