🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 25 (from laksa089)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa025.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://phppot.com/jquery/read-display-json-data-using-jquery-ajax/\')), getAhrefsUnparsedNoserviceFromURL(\'https://phppot.com/jquery/read-display-json-data-using-jquery-ajax/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/phppot.com\/jquery\/read-display-json-data-using-jquery-ajax\/","crawl_time":1775773386,"first_indexed_time":1520589175,"http_code":200,"src_unparsed":"com,phppot!\/jquery\/read-display-json-data-using-jquery-ajax\/ s443","src_root_hash":"16434601030132471625","history_drop_reason":null,"meta_title":"Read Display JSON Data using jQuery AJAX - PHPpot","meta_descriptions":["In this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database r"],"attrs_boilerpipe_text":"by\nVincy\n. Last modified on October 12th, 2022.\nIn this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database records and converting them into JSON data using PHP json_encode().\nThen, we are parsing JSON data and iterating objects from the jQuery function.\nIf you want to know more about\nJSON handling with PHP\nthe linked article will be a comprehensive guide for you.\nView Demo\njQuery JSON Read Function\nThis function will be called on the click event of a reading button. It uses jQuery getJSON function to read JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML.\nThe code is,\nfunction readJSONData() {\r\n\t$('#loader-icon').css(\"display\", \"inline-block\");\r\n\t$.getJSON(\"read-tutorial-ajax.php\", function(data) {\r\n\t})\r\n\t\t.done(function(data) {\r\n\t\t\tvar json_data;\r\n\t\t\t$('#read-data').show();\r\n\t\t\t$('.demo-table').show();\r\n\t\t\t$('#demo-table-content').empty();\r\n\t\t\t$.each(data, function(i, tutorial) {\r\n\t\t\t\tjson_data = '<tr>' +\r\n\t\t\t\t\t'<td valign=\"top\">' +\r\n\t\t\t\t\t'<div class=\"feed_title\">' + tutorial.title + '<\/div>' +\r\n\t\t\t\t\t'<div>' + tutorial.description + '<\/div>' +\r\n\t\t\t\t\t'<\/td>' +\r\n\t\t\t\t\t'<\/tr>';\r\n\t\t\t\t$(json_data).appendTo('#demo-table-content');\r\n\t\t\t})\r\n\t\t\t$('#loader-icon').hide();\r\n\t\t})\r\n\t\t.fail(function() {\r\n\t\t\tvar json_data;\r\n\t\t\t$('#read-data').show();\r\n\t\t\t$('.demo-table').show();\r\n\t\t\t$('#demo-table-content').empty();\r\n\t\t\tjson_data = '<tr>' +\r\n\t\t\t\t'<td valign=\"top\">No Tutorials Found<\/td>' +\r\n\t\t\t\t'<\/tr>';\r\n\t\t\t$(json_data).appendTo('#demo-table-content');\r\n\t\t\t$('#loader-icon').hide();\r\n\t\t})\r\n}\nHTML to display the read-JSON trigger and result on the UI\nThis HTML code will show a button “Read JSON Data” on the UI when landing. On its click, it calls the readJSONData() function we saw in the above section.\nThe JSON data returned by the server is appended to the target HTML DIV tag “demo-table-content” row by row.\n<html>\r\n<head>\r\n<title>Read Display JSON Data using jQuery AJAX<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"assets\/css\/styles.css\" rel=\"stylesheet\" type=\"text\/css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.1.min.js\"\r\n    integrity=\"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=\"\r\n    crossorigin=\"anonymous\"><\/script>\r\n<script type=\"text\/javascript\" src=\"assets\/js\/read-json.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div id=\"read-data\">\r\n        <button class=\"btnRead\" onClick=\"readJSONData();\">Read JSON Data<\/button>\r\n        <div id=\"loader-icon\">\r\n            <img src=\"loader.gif\" id=\"image-size\" \/>\r\n        <\/div>\r\n    <\/div>\r\n    <table class=\"demo-table\">\r\n        <tbody id=\"demo-table-content\">\r\n        <\/tbody>\r\n    <\/table>\r\n<\/body>\r\n<\/html>\nCreate JSON Data in PHP\nThis PHP code reads data from the database. And then, using the\njson_encode() function\n, it converts the database result array into JSON formatted string.\nIt will be sent as a response to the jQuery getJSON request. The Code is,\n<?php\r\n$connection = mysqli_connect(\"localhost\", \"root\", \"\", \"db_json_read\");\r\n$sql = \"SELECT * FROM tutorial\";\r\n$statement = $connection->prepare($sql);\r\n$statement->execute();\r\n$result = $statement->get_result();\r\n$resultSet = array();\r\nwhile ($row = $result->fetch_assoc()) {\r\n    $resultSet[] = $row;\r\n}\r\nif (! empty($resultSet)) {\r\n    print json_encode($resultSet);\r\n}\r\n?>\nDatabase Table SQL\nThis SQL script contains the target database table structure and some initial data. By importing this script before running this example, you can see the expected result without causing any errors.\nWith no data, this read-JSON example will show the message “No records found” on the UI.\nCREATE TABLE `tutorial` (\r\n  `id` int(8) NOT NULL,\r\n  `title` varchar(255) NOT NULL,\r\n  `description` text NOT NULL,\r\n  `rating` tinyint(2) DEFAULT NULL\r\n);\r\n\r\n--\r\n-- Dumping data for table `tutorial`\r\n--\r\n\r\nINSERT INTO `tutorial` (`id`, `title`, `description`, `rating`) VALUES\r\n(1, 'Favorite Star Rating with jQuery', 'This tutorial is for doing favorite star ratings using jQuery. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user.', 1),\r\n(2, 'PHP RSS Feed Read and List', 'PHP\\'s simplexml_load_file() function is used for reading data from XML file. Using this function, we can parse RSS feed to get item object array.', 3),\r\n(3, 'jQuery AJAX Autocomplete – Country Example', 'Autocomplete feature is used to provide an auto suggestion for users while entering input. It suggests country names for the users based on the keyword they entered into the input field by using jQuery AJAX.', 5);\r\n\r\n--\r\n-- Indexes for dumped tables\r\n--\r\n\r\n--\r\n-- Indexes for table `tutorial`\r\n--\r\nALTER TABLE `tutorial`\r\n  ADD PRIMARY KEY (`id`);\r\n\r\n--\r\n-- AUTO_INCREMENT for dumped tables\r\n--\r\n\r\n--\r\n-- AUTO_INCREMENT for table `tutorial`\r\n--\r\nALTER TABLE `tutorial`\r\n  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;\nView Demo\nDownload","attrs_markdown":"[About](https:\/\/phppot.com\/about\/)\n\n[Work with me](https:\/\/phppot.com\/work-with-me\/)\n\n# Read Display JSON Data using jQuery AJAX\nby [Vincy](https:\/\/phppot.com\/about\/). Last modified on October 12th, 2022.\n\nIn this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database records and converting them into JSON data using PHP json\\_encode().\n\nThen, we are parsing JSON data and iterating objects from the jQuery function.\n\nIf you want to know more about [JSON handling with PHP](https:\/\/phppot.com\/php\/json-handling-with-php-how-to-encode-write-parse-decode-and-convert\/) the linked article will be a comprehensive guide for you.\n\n[View Demo](https:\/\/phppot.com\/demo\/read-display-json-data-using-jquery-ajax\/)\n\n## jQuery JSON Read Function\nThis function will be called on the click event of a reading button. It uses jQuery getJSON function to read JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML.\n\n![jquery-json-read](https:\/\/phppot.com\/wp-content\/uploads\/2014\/11\/jquery-json-read.png)\n\nThe code is,\n```\nfunction readJSONData() {\r\n\t$('#loader-icon').css(\"display\", \"inline-block\");\r\n\t$.getJSON(\"read-tutorial-ajax.php\", function(data) {\r\n\t})\r\n\t\t.done(function(data) {\r\n\t\t\tvar json_data;\r\n\t\t\t$('#read-data').show();\r\n\t\t\t$('.demo-table').show();\r\n\t\t\t$('#demo-table-content').empty();\r\n\t\t\t$.each(data, function(i, tutorial) {\r\n\t\t\t\tjson_data = '<tr>' +\r\n\t\t\t\t\t'<td valign=\"top\">' +\r\n\t\t\t\t\t'<div class=\"feed_title\">' + tutorial.title + '<\/div>' +\r\n\t\t\t\t\t'<div>' + tutorial.description + '<\/div>' +\r\n\t\t\t\t\t'<\/td>' +\r\n\t\t\t\t\t'<\/tr>';\r\n\t\t\t\t$(json_data).appendTo('#demo-table-content');\r\n\t\t\t})\r\n\t\t\t$('#loader-icon').hide();\r\n\t\t})\r\n\t\t.fail(function() {\r\n\t\t\tvar json_data;\r\n\t\t\t$('#read-data').show();\r\n\t\t\t$('.demo-table').show();\r\n\t\t\t$('#demo-table-content').empty();\r\n\t\t\tjson_data = '<tr>' +\r\n\t\t\t\t'<td valign=\"top\">No Tutorials Found<\/td>' +\r\n\t\t\t\t'<\/tr>';\r\n\t\t\t$(json_data).appendTo('#demo-table-content');\r\n\t\t\t$('#loader-icon').hide();\r\n\t\t})\r\n}\n```\n## HTML to display the read-JSON trigger and result on the UI\nThis HTML code will show a button “Read JSON Data” on the UI when landing. On its click, it calls the readJSONData() function we saw in the above section.\n\nThe JSON data returned by the server is appended to the target HTML DIV tag “demo-table-content” row by row.\n```\n<html>\r\n<head>\r\n<title>Read Display JSON Data using jQuery AJAX<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"assets\/css\/styles.css\" rel=\"stylesheet\" type=\"text\/css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.1.min.js\"\r\n    integrity=\"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=\"\r\n    crossorigin=\"anonymous\"><\/script>\r\n<script type=\"text\/javascript\" src=\"assets\/js\/read-json.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div id=\"read-data\">\r\n        <button class=\"btnRead\" onClick=\"readJSONData();\">Read JSON Data<\/button>\r\n        <div id=\"loader-icon\">\r\n            <img src=\"loader.gif\" id=\"image-size\" \/>\r\n        <\/div>\r\n    <\/div>\r\n    <table class=\"demo-table\">\r\n        <tbody id=\"demo-table-content\">\r\n        <\/tbody>\r\n    <\/table>\r\n<\/body>\r\n<\/html>\n```\n## Create JSON Data in PHP\nThis PHP code reads data from the database. And then, using the [json\\_encode() function](https:\/\/phppot.com\/php\/php-json-encode-and-decode\/), it converts the database result array into JSON formatted string.\n\nIt will be sent as a response to the jQuery getJSON request. The Code is,\n```\n<?php\r\n$connection = mysqli_connect(\"localhost\", \"root\", \"\", \"db_json_read\");\r\n$sql = \"SELECT * FROM tutorial\";\r\n$statement = $connection->prepare($sql);\r\n$statement->execute();\r\n$result = $statement->get_result();\r\n$resultSet = array();\r\nwhile ($row = $result->fetch_assoc()) {\r\n    $resultSet[] = $row;\r\n}\r\nif (! empty($resultSet)) {\r\n    print json_encode($resultSet);\r\n}\r\n?>\n```\n## Database Table SQL\nThis SQL script contains the target database table structure and some initial data. By importing this script before running this example, you can see the expected result without causing any errors.\n\nWith no data, this read-JSON example will show the message “No records found” on the UI.\n```\nCREATE TABLE `tutorial` (\r\n  `id` int(8) NOT NULL,\r\n  `title` varchar(255) NOT NULL,\r\n  `description` text NOT NULL,\r\n  `rating` tinyint(2) DEFAULT NULL\r\n);\r\n\r\n--\r\n-- Dumping data for table `tutorial`\r\n--\r\n\r\nINSERT INTO `tutorial` (`id`, `title`, `description`, `rating`) VALUES\r\n(1, 'Favorite Star Rating with jQuery', 'This tutorial is for doing favorite star ratings using jQuery. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user.', 1),\r\n(2, 'PHP RSS Feed Read and List', 'PHP\\'s simplexml_load_file() function is used for reading data from XML file. Using this function, we can parse RSS feed to get item object array.', 3),\r\n(3, 'jQuery AJAX Autocomplete – Country Example', 'Autocomplete feature is used to provide an auto suggestion for users while entering input. It suggests country names for the users based on the keyword they entered into the input field by using jQuery AJAX.', 5);\r\n\r\n--\r\n-- Indexes for dumped tables\r\n--\r\n\r\n--\r\n-- Indexes for table `tutorial`\r\n--\r\nALTER TABLE `tutorial`\r\n  ADD PRIMARY KEY (`id`);\r\n\r\n--\r\n-- AUTO_INCREMENT for dumped tables\r\n--\r\n\r\n--\r\n-- AUTO_INCREMENT for table `tutorial`\r\n--\r\nALTER TABLE `tutorial`\r\n  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;\n```\n[View Demo](https:\/\/phppot.com\/demo\/read-display-json-data-using-jquery-ajax\/)[Download](https:\/\/phppot.com\/downloads\/jquery\/read-display-json-data-using-jquery-ajax.zip)\n\n![Photo of Vincy, PHP developer](https:\/\/phppot.com\/wp-content\/themes\/solandra\/images\/vincy.jpeg)\n\nWritten by [Vincy](https:\/\/phppot.com\/about\/)   Last updated: October 12, 2022\n\nI'm a PHP developer with 20+ years of experience and a Master's degree in Computer Science. I build and improve production PHP systems for eCommerce, payments, webhooks, and integrations, including legacy upgrades (PHP 5\/7 to PHP 8.x).\n\n### Continue Learning\nThese related tutorials may help you continue learning.\n\n[1 ![jquery ajax pagination output](https:\/\/phppot.com\/wp-content\/uploads\/2014\/07\/jquery-ajax-pagination-output-150x150.jpg) jQuery AJAX Pagination In this tutorial, we are going to see the simple code for pagination using…](https:\/\/phppot.com\/php\/jquery-ajax-pagination\/)\n\n[2 ![](https:\/\/phppot.com\/wp-content\/uploads\/2017\/03\/jquery-ajax-inline-insert-150x150.png) Inline Insert using jQuery AJAX This tutorial will show how to inline insert the HTML5 table data into a…](https:\/\/phppot.com\/jquery\/inline-insert-using-jquery-ajax\/)\n\n[3 ![search pagination jquery ajax](https:\/\/phppot.com\/wp-content\/uploads\/2014\/11\/search-pagination-jquery-ajax-150x150.jpg) PHP CRUD with Search and Pagination using jQuery AJAX This tutorial is for doing database operations with search and pagination. It uses jQuery…](https:\/\/phppot.com\/php\/php-crud-with-search-and-pagination-using-jquery-ajax\/)\n\n[4 ![](https:\/\/phppot.com\/wp-content\/uploads\/2016\/09\/jquery-ajax-inline-crud-with-php-150x150.png) jQuery AJAX Inline CRUD with PHP Inline CRUD is for performing Create, Read, Update and Delete operations within a grid…](https:\/\/phppot.com\/jquery\/jquery-ajax-inline-crud-with-php\/)\n### Leave a Reply [Cancel reply](https:\/\/phppot.com\/jquery\/read-display-json-data-using-jquery-ajax\/#respond)\n[↑ Back to Top](https:\/\/phppot.com\/jquery\/read-display-json-data-using-jquery-ajax\/#top)\n\nClose\n\n- [PHP](https:\/\/phppot.com\/category\/php\/)\n- [MySQL](https:\/\/phppot.com\/category\/mysql\/)\n- [JavaScript](https:\/\/phppot.com\/category\/javascript\/)\n- [Laravel](https:\/\/phppot.com\/category\/laravel\/)\n- [React](https:\/\/phppot.com\/category\/react\/)\n\nExplore topics\n\n- jQuery\n  - jQuery Tutorials\n    - [jQuery Drag and Drop](https:\/\/phppot.com\/jquery\/jquery-drag-and-drop\/)\n    - [Highcharts - Compare Data using Column Chart](https:\/\/phppot.com\/jquery\/highcharts-compare-data-using-column-chart\/)\n    - [jQuery News Ticker](https:\/\/phppot.com\/jquery\/jquery-news-ticker\/)\n    - [How to Add Input to Form using jQuery](https:\/\/phppot.com\/jquery\/jquery-add-input-to-form\/)\n    - [Read HTML5 Data Attribute via jQuery](https:\/\/phppot.com\/jquery\/read-html5-data-attribute-via-jquery\/)\n    - [DropDown with Search using jQuery](https:\/\/phppot.com\/jquery\/dropdown-with-search-using-jquery\/)\n    - [jQuery Color Picker - Predefined Colors](https:\/\/phppot.com\/jquery\/jquery-color-picker\/)\n    - [jQuery Table Row Column Highlight on Hover](https:\/\/phppot.com\/jquery\/jquery-table-row-column-highlight-on-hover\/)\n    - [Responsive Datatables with Automatic Column Hiding](https:\/\/phppot.com\/jquery\/responsive-datatables-with-automatic-column-hiding\/)\n    - [Clone HTML using jQuery](https:\/\/phppot.com\/jquery\/clone-html-using-jquery\/)\n    - [Switch CSS Based on Window Size using jQuery](https:\/\/phppot.com\/jquery\/switch-css-based-on-window-size-using-jquery\/)\n    - [Change Theme using jQuery Split Button](https:\/\/phppot.com\/jquery\/change-theme-using-jquery-split-button\/)\n    - [Switch CSS Class Using jQuery](https:\/\/phppot.com\/jquery\/switch-css-class-using-jquery\/)\n    - [Resize HTML DOM using jQuery](https:\/\/phppot.com\/php\/resize-html-dom-using-jquery\/)\n    - [Equal Height Columns with jQuery](https:\/\/phppot.com\/jquery\/equal-height-columns-with-jquery\/)\n    - [Moving DIV Element using jQuery](https:\/\/phppot.com\/jquery\/moving-div-element-using-jquery\/)\n    - [jQuery Accordion](https:\/\/phppot.com\/jquery\/jquery-accordion\/)\n    - [jQuery Custom Dropdown with Checkbox](https:\/\/phppot.com\/jquery\/jquery-custom-dropdown-with-checkbox\/)\n    - [Favorite Star Rating with jQuery](https:\/\/phppot.com\/jquery\/favorite-star-rating-with-jquery\/)\n    - [How to Code Tic Tac Toe Game in jQuery](https:\/\/phppot.com\/jquery\/how-to-code-tic-tac-toe-game-in-jquery\/)\n    - [jQuery ThickBox](https:\/\/phppot.com\/jquery\/jquery-thickbox\/)\n    - [jQuery Append](https:\/\/phppot.com\/jquery\/jquery-apend\/)\n    - [jQuery UI ThemeRoller](https:\/\/phppot.com\/jquery\/jquery-ui-themeroller\/)\n    - [jQuery UI Color Picker without Bootstrap](https:\/\/phppot.com\/jquery\/jquery-ui-color-picker-without-bootstrap\/)\n  - jQuery Bootstrap\n    - [How to Create Tooltips with Bootstrap](https:\/\/phppot.com\/bootstrap\/how-to-create-tooltips-with-bootstrap\/)\n    - [Tags using Bootstrap Tags Input Plugin with Autocomplete](https:\/\/phppot.com\/jquery\/tags-using-bootstrap-tags-input-plugin-with-autocomplete\/)\n    - [How to Create Typeahead (Auto-Complete) Field using Bootstrap](https:\/\/phppot.com\/jquery\/how-to-create-typeahead-auto-complete-field-using-bootstrap\/)\n    - [Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax](https:\/\/phppot.com\/jquery\/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax\/)\n    - [Loading Dynamic Content on a Bootstrap Modal using jQuery](https:\/\/phppot.com\/jquery\/loading-dynamic-content-on-a-bootstrap-modal-using-jquery\/)\n    - [Bootstrap Form Inline - Label Input Group in Line](https:\/\/phppot.com\/web\/bootstrap-form-inline\/)\n    - [Changing DIV Background using Bootstrap Colorpicker](https:\/\/phppot.com\/jquery\/changing-div-background-using-bootstrap-colorpicker\/)\n    - [Bootstrap Sticky Navbar Menu on Scroll using CSS and JavaScript](https:\/\/phppot.com\/bootstrap\/bootstrap-sticky-navbar\/)\n  - jQuery Effects\n    - [jQuery Sidebar Expand Collapse](https:\/\/phppot.com\/jquery\/jquery-sidebar-expand-collapse\/)\n    - [jQuery Show Hide](https:\/\/phppot.com\/jquery\/jquery-show-hide\/)\n    - [jQuery Fading Methods](https:\/\/phppot.com\/jquery\/jquery-fading-methods\/)\n    - [Simple Hover Fade Effect Using jQuery](https:\/\/phppot.com\/jquery\/simple-hover-fade-effect-using-jquery\/)\n    - [jQuery Parallax Slider](https:\/\/phppot.com\/jquery\/jquery-parallax-slider\/)\n    - [jQuery Fade Out Message after Form Submit](https:\/\/phppot.com\/jquery\/jquery-fade-out-message-after-form-submit\/)\n    - [Toggle HTML with jQuery](https:\/\/phppot.com\/jquery\/toggle-html-with-jquery\/)\n    - [Toggle HTML with Javascript](https:\/\/phppot.com\/jquery\/toggle-html-with-javascript\/)\n    - [jQuery Login Form Shaker](https:\/\/phppot.com\/jquery\/jquery-login-form-shaker\/)\n    - [Header Menu Horizontal Expand Collapse Using jQuery](https:\/\/phppot.com\/jquery\/header-menu-horizontal-expand-collapse-using-jquery\/)\n    - [jQuery AJAX Autocomplete - Country Example](https:\/\/phppot.com\/jquery\/jquery-ajax-autocomplete-country-example\/)\n  - jQuery Animation\n    - [jQuery Image Slider](https:\/\/phppot.com\/php\/jquery-image-slider\/)\n    - [jQuery Image Slideshow](https:\/\/phppot.com\/jquery\/jquery-image-slideshow\/)\n    - [Responsive Image Slideshow using jQuery](https:\/\/phppot.com\/jquery\/responsive-image-slideshow-using-jquery\/)\n    - [jQuery Image Carousel](https:\/\/phppot.com\/jquery\/jquery-image-carousel\/)\n    - [Pause Resume Slider using jQuery](https:\/\/phppot.com\/jquery\/pause-resume-slider-using-jquery\/)\n    - [Meme Generator using jQuery](https:\/\/phppot.com\/jquery\/meme-generator-using-jquery\/)\n    - [jQuery Background Slider](https:\/\/phppot.com\/jquery\/jquery-background-slider\/)\n    - [jQuery Background Image Animation](https:\/\/phppot.com\/jquery\/jquery-background-image-animation\/)\n    - [Bouncing Ball Animation using jQuery](https:\/\/phppot.com\/jquery\/bouncing-ball-animation-using-jquery\/)\n    - [jQuery on Scroll Background Animation](https:\/\/phppot.com\/jquery\/jquery-on-scroll-background-animation\/)\n    - [Remove Image Color using jQuery](https:\/\/phppot.com\/jquery\/remove-image-color-using-jquery\/)\n    - [jQuery Sliding Text on Images](https:\/\/phppot.com\/jquery\/jquery-sliding-text-on-images\/)\n    - [jQuery Image Rotate](https:\/\/phppot.com\/jquery\/jquery-image-rotate\/)\n    - [Image Flip with jQuery CSS](https:\/\/phppot.com\/jquery\/image-flip-with-jquery-css\/)\n    - [Image Editor: Move Scale Skew Rotate and Spin with CSS Transform](https:\/\/phppot.com\/css\/image-editor-move-scale-skew-rotate-and-spin-with-css-transform\/)\n    - [How to Make Online Photo Editing Effects like Blur Image, Sepia, Vintage](https:\/\/phppot.com\/css\/how-to-make-online-photo-editing-effects-like-blur-image-sepia-vintage\/)\n    - [PHP Image Slideshow with jQuery using Multiple File Upload](https:\/\/phppot.com\/jquery\/php-image-slideshow-with-jquery-using-multiple-file-upload\/)\n  - jQuery Menu\n    - [jQuery Menu Dropdown](https:\/\/phppot.com\/jquery\/jquery-menu-dropdown\/)\n    - [jQuery Scrolling Menu](https:\/\/phppot.com\/jquery\/jquery-scrolling-menu\/)\n    - [jQuery Menu Slider](https:\/\/phppot.com\/jquery\/jquery-menu-slider\/)\n    - [jQuery Mega Menu](https:\/\/phppot.com\/jquery\/jquery-mega-menu\/)\n    - [jQuery Active Menu Highlight](https:\/\/phppot.com\/jquery\/jquery-active-menu-highlight\/)\n    - [jQuery Expand Collapse All](https:\/\/phppot.com\/jquery\/jquery-expand-collapse-all\/)\n    - [jQuery Sliding Menu](https:\/\/phppot.com\/jquery\/jquery-sliding-menu\/)\n    - [Responsive Menu with jQuery and CSS](https:\/\/phppot.com\/jquery\/responsive-menu-with-jquery-and-css\/)\n    - [How to Create Horizontal Scrolling Menu using jQuery and PHP](https:\/\/phppot.com\/jquery\/how-to-create-horizontal-scrolling-menu-using-jquery-and-php\/)\n  - jQuery AJAX Form\n    - [Check Uncheck All Checkbox using jQuery](https:\/\/phppot.com\/jquery\/check-uncheck-all-checkbox-using-jquery\/)\n    - [jQuery AJAX AutoComplete with Create-New Feature](https:\/\/phppot.com\/jquery\/jquery-ajax-autocomplete\/)\n    - [jQuery Password Strength Checker](https:\/\/phppot.com\/jquery\/jquery-password-strength-checker\/)\n    - [jQuery Datepicker](https:\/\/phppot.com\/jquery\/jquery-datepicker\/)\n    - [Formatting Date With jQuery Date Picker](https:\/\/phppot.com\/jquery\/formatting-date-with-jquery-date-picker\/)\n    - [Prevent Form Double Submit using jQuery](https:\/\/phppot.com\/jquery\/prevent-form-double-submit-using-jquery\/)\n    - [Getting Checkbox Values in jQuery](https:\/\/phppot.com\/php\/getting-checkbox-values-in-jquery\/)\n    - [Dependent Auto Suggest with jQuery](https:\/\/phppot.com\/jquery\/dependent-auto-suggest-with-jquery\/)\n    - [Dependent Drop-down List in PHP using jQuery AJAX with Country State Example](https:\/\/phppot.com\/jquery\/jquery-dependent-dropdown-list-countries-and-states\/)\n    - [jQuery Autocomplete with XML Data Source](https:\/\/phppot.com\/jquery\/jquery-autocomplete-with-xml-data-source\/)\n  - jQuery Form Validation\n    - [Enable Disable Submit Button Based on Validation](https:\/\/phppot.com\/jquery\/enable-disable-submit-button-based-on-validation\/)\n    - [Restrict Typing Invalid Data in Form Field using jQuery](https:\/\/phppot.com\/jquery\/restrict-typing-invalid-data-in-form-field-using-jquery\/)\n    - [File Size Validation using jQuery](https:\/\/phppot.com\/jquery\/file-size-validation-using-jquery\/)\n    - [jQuery Form Validation to Restrict Multiple URL](https:\/\/phppot.com\/jquery\/jquery-form-validation-to-restrict-multiple-url\/)\n    - [Twitter Like Character Count Validation using jQuery](https:\/\/phppot.com\/jquery\/twitter-like-character-count-validation-using-jquery\/)\n    - [jQuery Credit Card Validator](https:\/\/phppot.com\/jquery\/jquery-credit-card-validator\/)\n    - [Twitter Style Remaining Character Count using jQuery](https:\/\/phppot.com\/jquery\/twitter-style-remaining-character-count-using-jquery\/)\n  - jQuery Contact Form\n    - [PHP Contact Form with jQuery AJAX](https:\/\/phppot.com\/jquery\/php-contact-form-with-jquery-ajax\/)\n    - [PHP Captcha using jQuery AJAX](https:\/\/phppot.com\/jquery\/php-captcha-using-jquery-ajax\/)\n    - [Floating Contact Form using jQuery AJAX](https:\/\/phppot.com\/jquery\/floating-contact-form-using-jquery-ajax\/)\n    - [jQuery Form Validation with Tooltip](https:\/\/phppot.com\/jquery\/jquery-form-validation-with-tooltip\/)\n    - [Slide-In Contact Form using jQuery](https:\/\/phppot.com\/jquery\/slide-in-contact-form-using-jquery\/)\n    - [jQuery Contact Form with Attachment using PHP](https:\/\/phppot.com\/jquery\/jquery-contact-form-with-attachment-using-php\/)\n  - jQuery File Upload\n    - [PHP AJAX Image Upload](https:\/\/phppot.com\/php\/php-ajax-image-upload\/)\n    - [PHP Upload Multiple Files via AJAX using jQuery](https:\/\/phppot.com\/jquery\/php-ajax-multiple-image-upload-using-jquery\/)\n    - [Add Delete Image via jQuery AJAX](https:\/\/phppot.com\/jquery\/add-delete-image-via-jquery-ajax\/)\n    - [jQuery Drag and Drop Image Upload](https:\/\/phppot.com\/jquery\/jquery-drag-and-drop-image-upload\/)\n    - [jQuery Progress Bar for PHP AJAX File Upload](https:\/\/phppot.com\/jquery\/jquery-progress-bar-for-php-ajax-file-upload\/)\n    - [jQuery Ajax Image Resize with Aspect Ratio](https:\/\/phppot.com\/jquery\/jquery-ajax-image-resize-with-aspect-ratio\/)\n  - jQuery AJAX\n    - [Dynamic Content Load using jQuery AJAX](https:\/\/phppot.com\/jquery\/dynamic-content-load-using-jquery-ajax\/)\n    - [jQuery AJAX Image Upload](https:\/\/phppot.com\/jquery\/jquery-ajax-image-upload\/)\n    - [Responsive Image Upload using jQuery Drag and Drop](https:\/\/phppot.com\/jquery\/responsive-image-upload-using-jquery-drag-and-drop\/)\n    - [jQuery DIV Auto Load and Refresh](https:\/\/phppot.com\/jquery\/jquery-div-auto-load-and-refresh\/)\n    - [Live Username Availability Check using PHP and jQuery AJAX](https:\/\/phppot.com\/jquery\/live-username-availability-check-using-php-and-jquery-ajax\/)\n    - [Load Dynamic Data using jQuery](https:\/\/phppot.com\/jquery\/load-dynamic-data-using-jquery\/)\n    - [Dynamic Content Modal via AJAX with jQuery](https:\/\/phppot.com\/jquery\/dynamic-content-modal-via-ajax-with-jquery\/)\n    - [Creating Web Calendar in PHP using jQuery AJAX](https:\/\/phppot.com\/jquery\/creating-web-calendar-in-php-using-jquery-ajax\/)\n    - [Calculate Sum (Total) of DataTables Column using Footer Callback](https:\/\/phppot.com\/jquery\/calculate-sum-total-of-datatables-column-using-footer-callback\/)\n  - jQuery AJAX CRUD\n    - [AJAX Add Edit Delete Records in Database using PHP and jQuery](https:\/\/phppot.com\/jquery\/ajax-add-edit-delete-records-in-database-using-php-and-jquery\/)\n    - [jQuery AJAX Pagination](https:\/\/phppot.com\/php\/jquery-ajax-pagination\/)\n    - [PHP CRUD with Search and Pagination using jQuery AJAX](https:\/\/phppot.com\/php\/php-crud-with-search-and-pagination-using-jquery-ajax\/)\n    - [jQuery AJAX Add Edit Modal Window](https:\/\/phppot.com\/jquery\/jquery-ajax-add-edit-modal-window\/)\n    - [PHP MySQL Inline Editing using jQuery Ajax](https:\/\/phppot.com\/php\/php-mysql-inline-editing-using-jquery-ajax\/)\n    - [jQuery AJAX Inline CRUD with PHP](https:\/\/phppot.com\/jquery\/jquery-ajax-inline-crud-with-php\/)\n    - [Inline Insert using jQuery AJAX](https:\/\/phppot.com\/jquery\/inline-insert-using-jquery-ajax\/)\n    - [Using jqGrid Control with PHP](https:\/\/phppot.com\/jquery\/using-jqgrid-control-with-php\/)\n    - [jQuery Ajax Column Sort](https:\/\/phppot.com\/jquery\/jquery-ajax-column-sort\/)\n    - Read Display JSON Data using jQuery AJAX\n  - jQuery Social Media Effects\n    - [Load Data Dynamically on Page Scroll using jQuery AJAX and PHP](https:\/\/phppot.com\/jquery\/load-data-dynamically-on-page-scroll-using-jquery-ajax-and-php\/)\n    - [Sticky Social Icons in Sidebar using jQuery](https:\/\/phppot.com\/jquery\/sticky-social-icons-in-sidebar-using-jquery\/)\n    - [Dynamic Star Rating with PHP and jQuery](https:\/\/phppot.com\/jquery\/dynamic-star-rating-with-php-and-jquery\/)\n    - [Facebook Style Like Unlike using PHP jQuery](https:\/\/phppot.com\/jquery\/facebook-style-like-unlike-using-php-jquery\/)\n    - [PHP Voting System with jQuery AJAX](https:\/\/phppot.com\/jquery\/php-voting-system-with-jquery-ajax\/)\n    - [Facebook Style URL Extract with PHP and jQuery AJAX](https:\/\/phppot.com\/jquery\/facebook-style-url-extract-with-php-and-jquery-ajax\/)\n\nNeed PHP help?\n\n[Work with me](https:\/\/phppot.com\/work-with-me\/ \"Work with me\")\n\n![Portrait of Vincy, PHP developer](https:\/\/phppot.com\/wp-content\/themes\/solandra\/images\/vincy.jpeg)\n\nHi, I'm Vincy. I help build and improve PHP systems for eCommerce, payments, and legacy upgrades.\n\nI'm available for **freelance work**.   \n[Work with me](https:\/\/phppot.com\/work-with-me\/ \"Work with me\")\n\n[vincy@phppot.com](mailto:vincy@phppot.com \"Contact\")\n\nGet Connected\n\nPopular Tutorials\n\n1. [Simple PHP Shopping Cart](https:\/\/phppot.com\/php\/simple-php-shopping-cart\/)\n2. [Stripe Payment Gateway Integration using PHP](https:\/\/phppot.com\/php\/stripe-payment-gateway-integration-using-php\/)\n3. [User Registration in PHP with Login: Form with MySQL and Code Download](https:\/\/phppot.com\/php\/user-registration-in-php-with-login-form-with-mysql-and-code-download\/)\n4. [PHP Contact Form](https:\/\/phppot.com\/php\/php-contact-form\/)\n5. [How to Create Dynamic Stacked Bar, Doughnut and Pie charts in PHP with Chart.js](https:\/\/phppot.com\/php\/how-to-create-dynamic-stacked-bar-doughnut-and-pie-charts-in-php-with-chart-js\/)\n\nTestimonials\n\n“She replied promptly. She asked all the right questions and provided a very quick turnaround time, along with support to get any issues ironed out ...”\n\nSalim, VIN Analytics, USA\n\n[Read more testimonials](https:\/\/phppot.com\/testimonials\/)\n\n## Need help building or improving your PHP system?\neCommerce, payments, upgrades, and ongoing support.\n\n[Work with me](https:\/\/phppot.com\/work-with-me\/)\n\nResources\n\n- [Demo](https:\/\/phppot.com\/demo\/ \"Demo\")\n- [About](https:\/\/phppot.com\/about\/ \"About\")\n- [Contact](https:\/\/phppot.com\/contact\/ \"Contact\")\n- [Work with me](https:\/\/phppot.com\/work-with-me\/ \"Work with me\")\n- [Cancellation & Refund Policy](https:\/\/phppot.com\/refund-policy\/ \"Cancellation & Refund Policy\")\n\nConnect\n\n[LinkedIn](https:\/\/www.linkedin.com\/in\/vincya\/ \"LinkedIn Page\") [Facebook](https:\/\/www.facebook.com\/vincy.bay\/ \"Facebook Page\") [X](https:\/\/x.com\/GiftVincy \"X (Twitter) Profile\") [RSS](https:\/\/phppot.com\/feed\/ \"RSS Feed\")\n\nNewsletter\n\nFree weekly tutorials on PHP, Laravel, and React.\n\n© 2013 - 2026 [PHPpot](https:\/\/phppot.com\/ \"Helping you build websites\")  [Privacy](https:\/\/phppot.com\/privacy-policy\/ \"Privacy Policy\") • [Terms](https:\/\/phppot.com\/terms-of-use\/ \"Terms of Use\")","attrs_readable_markdown":"by [Vincy](https:\/\/phppot.com\/about\/). Last modified on October 12th, 2022.\n\nIn this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database records and converting them into JSON data using PHP json\\_encode().\n\nThen, we are parsing JSON data and iterating objects from the jQuery function.\n\nIf you want to know more about [JSON handling with PHP](https:\/\/phppot.com\/php\/json-handling-with-php-how-to-encode-write-parse-decode-and-convert\/) the linked article will be a comprehensive guide for you.\n\n[View Demo](https:\/\/phppot.com\/demo\/read-display-json-data-using-jquery-ajax\/)\n\n## jQuery JSON Read Function\nThis function will be called on the click event of a reading button. It uses jQuery getJSON function to read JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML.\n\n![jquery-json-read](https:\/\/phppot.com\/wp-content\/uploads\/2014\/11\/jquery-json-read.png)\n\nThe code is,\n```\nfunction readJSONData() {\r\n\t$('#loader-icon').css(\"display\", \"inline-block\");\r\n\t$.getJSON(\"read-tutorial-ajax.php\", function(data) {\r\n\t})\r\n\t\t.done(function(data) {\r\n\t\t\tvar json_data;\r\n\t\t\t$('#read-data').show();\r\n\t\t\t$('.demo-table').show();\r\n\t\t\t$('#demo-table-content').empty();\r\n\t\t\t$.each(data, function(i, tutorial) {\r\n\t\t\t\tjson_data = '<tr>' +\r\n\t\t\t\t\t'<td valign=\"top\">' +\r\n\t\t\t\t\t'<div class=\"feed_title\">' + tutorial.title + '<\/div>' +\r\n\t\t\t\t\t'<div>' + tutorial.description + '<\/div>' +\r\n\t\t\t\t\t'<\/td>' +\r\n\t\t\t\t\t'<\/tr>';\r\n\t\t\t\t$(json_data).appendTo('#demo-table-content');\r\n\t\t\t})\r\n\t\t\t$('#loader-icon').hide();\r\n\t\t})\r\n\t\t.fail(function() {\r\n\t\t\tvar json_data;\r\n\t\t\t$('#read-data').show();\r\n\t\t\t$('.demo-table').show();\r\n\t\t\t$('#demo-table-content').empty();\r\n\t\t\tjson_data = '<tr>' +\r\n\t\t\t\t'<td valign=\"top\">No Tutorials Found<\/td>' +\r\n\t\t\t\t'<\/tr>';\r\n\t\t\t$(json_data).appendTo('#demo-table-content');\r\n\t\t\t$('#loader-icon').hide();\r\n\t\t})\r\n}\n```\n## HTML to display the read-JSON trigger and result on the UI\nThis HTML code will show a button “Read JSON Data” on the UI when landing. On its click, it calls the readJSONData() function we saw in the above section.\n\nThe JSON data returned by the server is appended to the target HTML DIV tag “demo-table-content” row by row.\n```\n<html>\r\n<head>\r\n<title>Read Display JSON Data using jQuery AJAX<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"assets\/css\/styles.css\" rel=\"stylesheet\" type=\"text\/css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.1.min.js\"\r\n    integrity=\"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=\"\r\n    crossorigin=\"anonymous\"><\/script>\r\n<script type=\"text\/javascript\" src=\"assets\/js\/read-json.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div id=\"read-data\">\r\n        <button class=\"btnRead\" onClick=\"readJSONData();\">Read JSON Data<\/button>\r\n        <div id=\"loader-icon\">\r\n            <img src=\"loader.gif\" id=\"image-size\" \/>\r\n        <\/div>\r\n    <\/div>\r\n    <table class=\"demo-table\">\r\n        <tbody id=\"demo-table-content\">\r\n        <\/tbody>\r\n    <\/table>\r\n<\/body>\r\n<\/html>\n```\n## Create JSON Data in PHP\nThis PHP code reads data from the database. And then, using the [json\\_encode() function](https:\/\/phppot.com\/php\/php-json-encode-and-decode\/), it converts the database result array into JSON formatted string.\n\nIt will be sent as a response to the jQuery getJSON request. The Code is,\n```\n<?php\r\n$connection = mysqli_connect(\"localhost\", \"root\", \"\", \"db_json_read\");\r\n$sql = \"SELECT * FROM tutorial\";\r\n$statement = $connection->prepare($sql);\r\n$statement->execute();\r\n$result = $statement->get_result();\r\n$resultSet = array();\r\nwhile ($row = $result->fetch_assoc()) {\r\n    $resultSet[] = $row;\r\n}\r\nif (! empty($resultSet)) {\r\n    print json_encode($resultSet);\r\n}\r\n?>\n```\n## Database Table SQL\nThis SQL script contains the target database table structure and some initial data. By importing this script before running this example, you can see the expected result without causing any errors.\n\nWith no data, this read-JSON example will show the message “No records found” on the UI.\n```\nCREATE TABLE `tutorial` (\r\n  `id` int(8) NOT NULL,\r\n  `title` varchar(255) NOT NULL,\r\n  `description` text NOT NULL,\r\n  `rating` tinyint(2) DEFAULT NULL\r\n);\r\n\r\n--\r\n-- Dumping data for table `tutorial`\r\n--\r\n\r\nINSERT INTO `tutorial` (`id`, `title`, `description`, `rating`) VALUES\r\n(1, 'Favorite Star Rating with jQuery', 'This tutorial is for doing favorite star ratings using jQuery. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user.', 1),\r\n(2, 'PHP RSS Feed Read and List', 'PHP\\'s simplexml_load_file() function is used for reading data from XML file. Using this function, we can parse RSS feed to get item object array.', 3),\r\n(3, 'jQuery AJAX Autocomplete – Country Example', 'Autocomplete feature is used to provide an auto suggestion for users while entering input. It suggests country names for the users based on the keyword they entered into the input field by using jQuery AJAX.', 5);\r\n\r\n--\r\n-- Indexes for dumped tables\r\n--\r\n\r\n--\r\n-- Indexes for table `tutorial`\r\n--\r\nALTER TABLE `tutorial`\r\n  ADD PRIMARY KEY (`id`);\r\n\r\n--\r\n-- AUTO_INCREMENT for dumped tables\r\n--\r\n\r\n--\r\n-- AUTO_INCREMENT for table `tutorial`\r\n--\r\nALTER TABLE `tutorial`\r\n  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;\n```\n[View Demo](https:\/\/phppot.com\/demo\/read-display-json-data-using-jquery-ajax\/)[Download](https:\/\/phppot.com\/downloads\/jquery\/read-display-json-data-using-jquery-ajax.zip)","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

1 day ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.1 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://phppot.com/jquery/read-display-json-data-using-jquery-ajax/
Last Crawled	2026-04-09 22:23:06 (1 day ago)
First Indexed	2018-03-09 09:52:55 (8 years ago)
HTTP Status Code	200
Meta Title	Read Display JSON Data using jQuery AJAX - PHPpot
Meta Description	In this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database r
Meta Canonical	null
Boilerpipe Text	by Vincy . Last modified on October 12th, 2022. In this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database records and converting them into JSON data using PHP json_encode(). Then, we are parsing JSON data and iterating objects from the jQuery function. If you want to know more about JSON handling with PHP the linked article will be a comprehensive guide for you. View Demo jQuery JSON Read Function This function will be called on the click event of a reading button. It uses jQuery getJSON function to read JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML. The code is, function readJSONData() { $('#loader-icon').css("display", "inline-block"); $.getJSON("read-tutorial-ajax.php", function(data) { }) .done(function(data) { var json_data; $('#read-data').show(); $('.demo-table').show(); $('#demo-table-content').empty(); $.each(data, function(i, tutorial) { json_data = '<tr>' + '<td valign="top">' + '<div class="feed_title">' + tutorial.title + '</div>' + '<div>' + tutorial.description + '</div>' + '</td>' + '</tr>'; $(json_data).appendTo('#demo-table-content'); }) $('#loader-icon').hide(); }) .fail(function() { var json_data; $('#read-data').show(); $('.demo-table').show(); $('#demo-table-content').empty(); json_data = '<tr>' + '<td valign="top">No Tutorials Found</td>' + '</tr>'; $(json_data).appendTo('#demo-table-content'); $('#loader-icon').hide(); }) } HTML to display the read-JSON trigger and result on the UI This HTML code will show a button “Read JSON Data” on the UI when landing. On its click, it calls the readJSONData() function we saw in the above section. The JSON data returned by the server is appended to the target HTML DIV tag “demo-table-content” row by row. <html> <head> <title>Read Display JSON Data using jQuery AJAX</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/styles.css" rel="stylesheet" type="text/css"> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script type="text/javascript" src="assets/js/read-json.js"></script> </head> <body> <div id="read-data"> <button class="btnRead" onClick="readJSONData();">Read JSON Data</button> <div id="loader-icon"> <img src="loader.gif" id="image-size" /> </div> </div> <table class="demo-table"> <tbody id="demo-table-content"> </tbody> </table> </body> </html> Create JSON Data in PHP This PHP code reads data from the database. And then, using the json_encode() function , it converts the database result array into JSON formatted string. It will be sent as a response to the jQuery getJSON request. The Code is, <?php $connection = mysqli_connect("localhost", "root", "", "db_json_read"); $sql = "SELECT * FROM tutorial"; $statement = $connection->prepare($sql); $statement->execute(); $result = $statement->get_result(); $resultSet = array(); while ($row = $result->fetch_assoc()) { $resultSet[] = $row; } if (! empty($resultSet)) { print json_encode($resultSet); } ?> Database Table SQL This SQL script contains the target database table structure and some initial data. By importing this script before running this example, you can see the expected result without causing any errors. With no data, this read-JSON example will show the message “No records found” on the UI. CREATE TABLE `tutorial` ( `id` int(8) NOT NULL, `title` varchar(255) NOT NULL, `description` text NOT NULL, `rating` tinyint(2) DEFAULT NULL ); -- -- Dumping data for table `tutorial` -- INSERT INTO `tutorial` (`id`, `title`, `description`, `rating`) VALUES (1, 'Favorite Star Rating with jQuery', 'This tutorial is for doing favorite star ratings using jQuery. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user.', 1), (2, 'PHP RSS Feed Read and List', 'PHP\'s simplexml_load_file() function is used for reading data from XML file. Using this function, we can parse RSS feed to get item object array.', 3), (3, 'jQuery AJAX Autocomplete – Country Example', 'Autocomplete feature is used to provide an auto suggestion for users while entering input. It suggests country names for the users based on the keyword they entered into the input field by using jQuery AJAX.', 5); -- -- Indexes for dumped tables -- -- -- Indexes for table `tutorial` -- ALTER TABLE `tutorial` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tutorial` -- ALTER TABLE `tutorial` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; View Demo Download
Markdown	[About](https://phppot.com/about/) [Work with me](https://phppot.com/work-with-me/) # Read Display JSON Data using jQuery AJAX by [Vincy](https://phppot.com/about/). Last modified on October 12th, 2022. In this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database records and converting them into JSON data using PHP json\_encode(). Then, we are parsing JSON data and iterating objects from the jQuery function. If you want to know more about [JSON handling with PHP](https://phppot.com/php/json-handling-with-php-how-to-encode-write-parse-decode-and-convert/) the linked article will be a comprehensive guide for you. [View Demo](https://phppot.com/demo/read-display-json-data-using-jquery-ajax/) ## jQuery JSON Read Function This function will be called on the click event of a reading button. It uses jQuery getJSON function to read JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML. ![jquery-json-read](https://phppot.com/wp-content/uploads/2014/11/jquery-json-read.png) The code is, ``` function readJSONData() { $('#loader-icon').css("display", "inline-block"); $.getJSON("read-tutorial-ajax.php", function(data) { }) .done(function(data) { var json_data; $('#read-data').show(); $('.demo-table').show(); $('#demo-table-content').empty(); $.each(data, function(i, tutorial) { json_data = '<tr>' + '<td valign="top">' + '<div class="feed_title">' + tutorial.title + '</div>' + '<div>' + tutorial.description + '</div>' + '</td>' + '</tr>'; $(json_data).appendTo('#demo-table-content'); }) $('#loader-icon').hide(); }) .fail(function() { var json_data; $('#read-data').show(); $('.demo-table').show(); $('#demo-table-content').empty(); json_data = '<tr>' + '<td valign="top">No Tutorials Found</td>' + '</tr>'; $(json_data).appendTo('#demo-table-content'); $('#loader-icon').hide(); }) } ``` ## HTML to display the read-JSON trigger and result on the UI This HTML code will show a button “Read JSON Data” on the UI when landing. On its click, it calls the readJSONData() function we saw in the above section. The JSON data returned by the server is appended to the target HTML DIV tag “demo-table-content” row by row. ``` <html> <head> <title>Read Display JSON Data using jQuery AJAX</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/styles.css" rel="stylesheet" type="text/css"> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script type="text/javascript" src="assets/js/read-json.js"></script> </head> <body> <div id="read-data"> <button class="btnRead" onClick="readJSONData();">Read JSON Data</button> <div id="loader-icon"> <img src="loader.gif" id="image-size" /> </div> </div> <table class="demo-table"> <tbody id="demo-table-content"> </tbody> </table> </body> </html> ``` ## Create JSON Data in PHP This PHP code reads data from the database. And then, using the [json\_encode() function](https://phppot.com/php/php-json-encode-and-decode/), it converts the database result array into JSON formatted string. It will be sent as a response to the jQuery getJSON request. The Code is, ``` <?php $connection = mysqli_connect("localhost", "root", "", "db_json_read"); $sql = "SELECT * FROM tutorial"; $statement = $connection->prepare($sql); $statement->execute(); $result = $statement->get_result(); $resultSet = array(); while ($row = $result->fetch_assoc()) { $resultSet[] = $row; } if (! empty($resultSet)) { print json_encode($resultSet); } ?> ``` ## Database Table SQL This SQL script contains the target database table structure and some initial data. By importing this script before running this example, you can see the expected result without causing any errors. With no data, this read-JSON example will show the message “No records found” on the UI. ``` CREATE TABLE `tutorial` ( `id` int(8) NOT NULL, `title` varchar(255) NOT NULL, `description` text NOT NULL, `rating` tinyint(2) DEFAULT NULL ); -- -- Dumping data for table `tutorial` -- INSERT INTO `tutorial` (`id`, `title`, `description`, `rating`) VALUES (1, 'Favorite Star Rating with jQuery', 'This tutorial is for doing favorite star ratings using jQuery. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user.', 1), (2, 'PHP RSS Feed Read and List', 'PHP\'s simplexml_load_file() function is used for reading data from XML file. Using this function, we can parse RSS feed to get item object array.', 3), (3, 'jQuery AJAX Autocomplete – Country Example', 'Autocomplete feature is used to provide an auto suggestion for users while entering input. It suggests country names for the users based on the keyword they entered into the input field by using jQuery AJAX.', 5); -- -- Indexes for dumped tables -- -- -- Indexes for table `tutorial` -- ALTER TABLE `tutorial` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tutorial` -- ALTER TABLE `tutorial` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; ``` [View Demo](https://phppot.com/demo/read-display-json-data-using-jquery-ajax/)[Download](https://phppot.com/downloads/jquery/read-display-json-data-using-jquery-ajax.zip) ![Photo of Vincy, PHP developer](https://phppot.com/wp-content/themes/solandra/images/vincy.jpeg) Written by [Vincy](https://phppot.com/about/) Last updated: October 12, 2022 I'm a PHP developer with 20+ years of experience and a Master's degree in Computer Science. I build and improve production PHP systems for eCommerce, payments, webhooks, and integrations, including legacy upgrades (PHP 5/7 to PHP 8.x). ### Continue Learning These related tutorials may help you continue learning. [1 ![jquery ajax pagination output](https://phppot.com/wp-content/uploads/2014/07/jquery-ajax-pagination-output-150x150.jpg) jQuery AJAX Pagination In this tutorial, we are going to see the simple code for pagination using…](https://phppot.com/php/jquery-ajax-pagination/) [2 ![](https://phppot.com/wp-content/uploads/2017/03/jquery-ajax-inline-insert-150x150.png) Inline Insert using jQuery AJAX This tutorial will show how to inline insert the HTML5 table data into a…](https://phppot.com/jquery/inline-insert-using-jquery-ajax/) [3 ![search pagination jquery ajax](https://phppot.com/wp-content/uploads/2014/11/search-pagination-jquery-ajax-150x150.jpg) PHP CRUD with Search and Pagination using jQuery AJAX This tutorial is for doing database operations with search and pagination. It uses jQuery…](https://phppot.com/php/php-crud-with-search-and-pagination-using-jquery-ajax/) [4 ![](https://phppot.com/wp-content/uploads/2016/09/jquery-ajax-inline-crud-with-php-150x150.png) jQuery AJAX Inline CRUD with PHP Inline CRUD is for performing Create, Read, Update and Delete operations within a grid…](https://phppot.com/jquery/jquery-ajax-inline-crud-with-php/) ### Leave a Reply [Cancel reply](https://phppot.com/jquery/read-display-json-data-using-jquery-ajax/#respond) [↑ Back to Top](https://phppot.com/jquery/read-display-json-data-using-jquery-ajax/#top) Close - [PHP](https://phppot.com/category/php/) - [MySQL](https://phppot.com/category/mysql/) - [JavaScript](https://phppot.com/category/javascript/) - [Laravel](https://phppot.com/category/laravel/) - [React](https://phppot.com/category/react/) Explore topics - jQuery - jQuery Tutorials - [jQuery Drag and Drop](https://phppot.com/jquery/jquery-drag-and-drop/) - [Highcharts - Compare Data using Column Chart](https://phppot.com/jquery/highcharts-compare-data-using-column-chart/) - [jQuery News Ticker](https://phppot.com/jquery/jquery-news-ticker/) - [How to Add Input to Form using jQuery](https://phppot.com/jquery/jquery-add-input-to-form/) - [Read HTML5 Data Attribute via jQuery](https://phppot.com/jquery/read-html5-data-attribute-via-jquery/) - [DropDown with Search using jQuery](https://phppot.com/jquery/dropdown-with-search-using-jquery/) - [jQuery Color Picker - Predefined Colors](https://phppot.com/jquery/jquery-color-picker/) - [jQuery Table Row Column Highlight on Hover](https://phppot.com/jquery/jquery-table-row-column-highlight-on-hover/) - [Responsive Datatables with Automatic Column Hiding](https://phppot.com/jquery/responsive-datatables-with-automatic-column-hiding/) - [Clone HTML using jQuery](https://phppot.com/jquery/clone-html-using-jquery/) - [Switch CSS Based on Window Size using jQuery](https://phppot.com/jquery/switch-css-based-on-window-size-using-jquery/) - [Change Theme using jQuery Split Button](https://phppot.com/jquery/change-theme-using-jquery-split-button/) - [Switch CSS Class Using jQuery](https://phppot.com/jquery/switch-css-class-using-jquery/) - [Resize HTML DOM using jQuery](https://phppot.com/php/resize-html-dom-using-jquery/) - [Equal Height Columns with jQuery](https://phppot.com/jquery/equal-height-columns-with-jquery/) - [Moving DIV Element using jQuery](https://phppot.com/jquery/moving-div-element-using-jquery/) - [jQuery Accordion](https://phppot.com/jquery/jquery-accordion/) - [jQuery Custom Dropdown with Checkbox](https://phppot.com/jquery/jquery-custom-dropdown-with-checkbox/) - [Favorite Star Rating with jQuery](https://phppot.com/jquery/favorite-star-rating-with-jquery/) - [How to Code Tic Tac Toe Game in jQuery](https://phppot.com/jquery/how-to-code-tic-tac-toe-game-in-jquery/) - [jQuery ThickBox](https://phppot.com/jquery/jquery-thickbox/) - [jQuery Append](https://phppot.com/jquery/jquery-apend/) - [jQuery UI ThemeRoller](https://phppot.com/jquery/jquery-ui-themeroller/) - [jQuery UI Color Picker without Bootstrap](https://phppot.com/jquery/jquery-ui-color-picker-without-bootstrap/) - jQuery Bootstrap - [How to Create Tooltips with Bootstrap](https://phppot.com/bootstrap/how-to-create-tooltips-with-bootstrap/) - [Tags using Bootstrap Tags Input Plugin with Autocomplete](https://phppot.com/jquery/tags-using-bootstrap-tags-input-plugin-with-autocomplete/) - [How to Create Typeahead (Auto-Complete) Field using Bootstrap](https://phppot.com/jquery/how-to-create-typeahead-auto-complete-field-using-bootstrap/) - [Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax](https://phppot.com/jquery/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax/) - [Loading Dynamic Content on a Bootstrap Modal using jQuery](https://phppot.com/jquery/loading-dynamic-content-on-a-bootstrap-modal-using-jquery/) - [Bootstrap Form Inline - Label Input Group in Line](https://phppot.com/web/bootstrap-form-inline/) - [Changing DIV Background using Bootstrap Colorpicker](https://phppot.com/jquery/changing-div-background-using-bootstrap-colorpicker/) - [Bootstrap Sticky Navbar Menu on Scroll using CSS and JavaScript](https://phppot.com/bootstrap/bootstrap-sticky-navbar/) - jQuery Effects - [jQuery Sidebar Expand Collapse](https://phppot.com/jquery/jquery-sidebar-expand-collapse/) - [jQuery Show Hide](https://phppot.com/jquery/jquery-show-hide/) - [jQuery Fading Methods](https://phppot.com/jquery/jquery-fading-methods/) - [Simple Hover Fade Effect Using jQuery](https://phppot.com/jquery/simple-hover-fade-effect-using-jquery/) - [jQuery Parallax Slider](https://phppot.com/jquery/jquery-parallax-slider/) - [jQuery Fade Out Message after Form Submit](https://phppot.com/jquery/jquery-fade-out-message-after-form-submit/) - [Toggle HTML with jQuery](https://phppot.com/jquery/toggle-html-with-jquery/) - [Toggle HTML with Javascript](https://phppot.com/jquery/toggle-html-with-javascript/) - [jQuery Login Form Shaker](https://phppot.com/jquery/jquery-login-form-shaker/) - [Header Menu Horizontal Expand Collapse Using jQuery](https://phppot.com/jquery/header-menu-horizontal-expand-collapse-using-jquery/) - [jQuery AJAX Autocomplete - Country Example](https://phppot.com/jquery/jquery-ajax-autocomplete-country-example/) - jQuery Animation - [jQuery Image Slider](https://phppot.com/php/jquery-image-slider/) - [jQuery Image Slideshow](https://phppot.com/jquery/jquery-image-slideshow/) - [Responsive Image Slideshow using jQuery](https://phppot.com/jquery/responsive-image-slideshow-using-jquery/) - [jQuery Image Carousel](https://phppot.com/jquery/jquery-image-carousel/) - [Pause Resume Slider using jQuery](https://phppot.com/jquery/pause-resume-slider-using-jquery/) - [Meme Generator using jQuery](https://phppot.com/jquery/meme-generator-using-jquery/) - [jQuery Background Slider](https://phppot.com/jquery/jquery-background-slider/) - [jQuery Background Image Animation](https://phppot.com/jquery/jquery-background-image-animation/) - [Bouncing Ball Animation using jQuery](https://phppot.com/jquery/bouncing-ball-animation-using-jquery/) - [jQuery on Scroll Background Animation](https://phppot.com/jquery/jquery-on-scroll-background-animation/) - [Remove Image Color using jQuery](https://phppot.com/jquery/remove-image-color-using-jquery/) - [jQuery Sliding Text on Images](https://phppot.com/jquery/jquery-sliding-text-on-images/) - [jQuery Image Rotate](https://phppot.com/jquery/jquery-image-rotate/) - [Image Flip with jQuery CSS](https://phppot.com/jquery/image-flip-with-jquery-css/) - [Image Editor: Move Scale Skew Rotate and Spin with CSS Transform](https://phppot.com/css/image-editor-move-scale-skew-rotate-and-spin-with-css-transform/) - [How to Make Online Photo Editing Effects like Blur Image, Sepia, Vintage](https://phppot.com/css/how-to-make-online-photo-editing-effects-like-blur-image-sepia-vintage/) - [PHP Image Slideshow with jQuery using Multiple File Upload](https://phppot.com/jquery/php-image-slideshow-with-jquery-using-multiple-file-upload/) - jQuery Menu - [jQuery Menu Dropdown](https://phppot.com/jquery/jquery-menu-dropdown/) - [jQuery Scrolling Menu](https://phppot.com/jquery/jquery-scrolling-menu/) - [jQuery Menu Slider](https://phppot.com/jquery/jquery-menu-slider/) - [jQuery Mega Menu](https://phppot.com/jquery/jquery-mega-menu/) - [jQuery Active Menu Highlight](https://phppot.com/jquery/jquery-active-menu-highlight/) - [jQuery Expand Collapse All](https://phppot.com/jquery/jquery-expand-collapse-all/) - [jQuery Sliding Menu](https://phppot.com/jquery/jquery-sliding-menu/) - [Responsive Menu with jQuery and CSS](https://phppot.com/jquery/responsive-menu-with-jquery-and-css/) - [How to Create Horizontal Scrolling Menu using jQuery and PHP](https://phppot.com/jquery/how-to-create-horizontal-scrolling-menu-using-jquery-and-php/) - jQuery AJAX Form - [Check Uncheck All Checkbox using jQuery](https://phppot.com/jquery/check-uncheck-all-checkbox-using-jquery/) - [jQuery AJAX AutoComplete with Create-New Feature](https://phppot.com/jquery/jquery-ajax-autocomplete/) - [jQuery Password Strength Checker](https://phppot.com/jquery/jquery-password-strength-checker/) - [jQuery Datepicker](https://phppot.com/jquery/jquery-datepicker/) - [Formatting Date With jQuery Date Picker](https://phppot.com/jquery/formatting-date-with-jquery-date-picker/) - [Prevent Form Double Submit using jQuery](https://phppot.com/jquery/prevent-form-double-submit-using-jquery/) - [Getting Checkbox Values in jQuery](https://phppot.com/php/getting-checkbox-values-in-jquery/) - [Dependent Auto Suggest with jQuery](https://phppot.com/jquery/dependent-auto-suggest-with-jquery/) - [Dependent Drop-down List in PHP using jQuery AJAX with Country State Example](https://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/) - [jQuery Autocomplete with XML Data Source](https://phppot.com/jquery/jquery-autocomplete-with-xml-data-source/) - jQuery Form Validation - [Enable Disable Submit Button Based on Validation](https://phppot.com/jquery/enable-disable-submit-button-based-on-validation/) - [Restrict Typing Invalid Data in Form Field using jQuery](https://phppot.com/jquery/restrict-typing-invalid-data-in-form-field-using-jquery/) - [File Size Validation using jQuery](https://phppot.com/jquery/file-size-validation-using-jquery/) - [jQuery Form Validation to Restrict Multiple URL](https://phppot.com/jquery/jquery-form-validation-to-restrict-multiple-url/) - [Twitter Like Character Count Validation using jQuery](https://phppot.com/jquery/twitter-like-character-count-validation-using-jquery/) - [jQuery Credit Card Validator](https://phppot.com/jquery/jquery-credit-card-validator/) - [Twitter Style Remaining Character Count using jQuery](https://phppot.com/jquery/twitter-style-remaining-character-count-using-jquery/) - jQuery Contact Form - [PHP Contact Form with jQuery AJAX](https://phppot.com/jquery/php-contact-form-with-jquery-ajax/) - [PHP Captcha using jQuery AJAX](https://phppot.com/jquery/php-captcha-using-jquery-ajax/) - [Floating Contact Form using jQuery AJAX](https://phppot.com/jquery/floating-contact-form-using-jquery-ajax/) - [jQuery Form Validation with Tooltip](https://phppot.com/jquery/jquery-form-validation-with-tooltip/) - [Slide-In Contact Form using jQuery](https://phppot.com/jquery/slide-in-contact-form-using-jquery/) - [jQuery Contact Form with Attachment using PHP](https://phppot.com/jquery/jquery-contact-form-with-attachment-using-php/) - jQuery File Upload - [PHP AJAX Image Upload](https://phppot.com/php/php-ajax-image-upload/) - [PHP Upload Multiple Files via AJAX using jQuery](https://phppot.com/jquery/php-ajax-multiple-image-upload-using-jquery/) - [Add Delete Image via jQuery AJAX](https://phppot.com/jquery/add-delete-image-via-jquery-ajax/) - [jQuery Drag and Drop Image Upload](https://phppot.com/jquery/jquery-drag-and-drop-image-upload/) - [jQuery Progress Bar for PHP AJAX File Upload](https://phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload/) - [jQuery Ajax Image Resize with Aspect Ratio](https://phppot.com/jquery/jquery-ajax-image-resize-with-aspect-ratio/) - jQuery AJAX - [Dynamic Content Load using jQuery AJAX](https://phppot.com/jquery/dynamic-content-load-using-jquery-ajax/) - [jQuery AJAX Image Upload](https://phppot.com/jquery/jquery-ajax-image-upload/) - [Responsive Image Upload using jQuery Drag and Drop](https://phppot.com/jquery/responsive-image-upload-using-jquery-drag-and-drop/) - [jQuery DIV Auto Load and Refresh](https://phppot.com/jquery/jquery-div-auto-load-and-refresh/) - [Live Username Availability Check using PHP and jQuery AJAX](https://phppot.com/jquery/live-username-availability-check-using-php-and-jquery-ajax/) - [Load Dynamic Data using jQuery](https://phppot.com/jquery/load-dynamic-data-using-jquery/) - [Dynamic Content Modal via AJAX with jQuery](https://phppot.com/jquery/dynamic-content-modal-via-ajax-with-jquery/) - [Creating Web Calendar in PHP using jQuery AJAX](https://phppot.com/jquery/creating-web-calendar-in-php-using-jquery-ajax/) - [Calculate Sum (Total) of DataTables Column using Footer Callback](https://phppot.com/jquery/calculate-sum-total-of-datatables-column-using-footer-callback/) - jQuery AJAX CRUD - [AJAX Add Edit Delete Records in Database using PHP and jQuery](https://phppot.com/jquery/ajax-add-edit-delete-records-in-database-using-php-and-jquery/) - [jQuery AJAX Pagination](https://phppot.com/php/jquery-ajax-pagination/) - [PHP CRUD with Search and Pagination using jQuery AJAX](https://phppot.com/php/php-crud-with-search-and-pagination-using-jquery-ajax/) - [jQuery AJAX Add Edit Modal Window](https://phppot.com/jquery/jquery-ajax-add-edit-modal-window/) - [PHP MySQL Inline Editing using jQuery Ajax](https://phppot.com/php/php-mysql-inline-editing-using-jquery-ajax/) - [jQuery AJAX Inline CRUD with PHP](https://phppot.com/jquery/jquery-ajax-inline-crud-with-php/) - [Inline Insert using jQuery AJAX](https://phppot.com/jquery/inline-insert-using-jquery-ajax/) - [Using jqGrid Control with PHP](https://phppot.com/jquery/using-jqgrid-control-with-php/) - [jQuery Ajax Column Sort](https://phppot.com/jquery/jquery-ajax-column-sort/) - Read Display JSON Data using jQuery AJAX - jQuery Social Media Effects - [Load Data Dynamically on Page Scroll using jQuery AJAX and PHP](https://phppot.com/jquery/load-data-dynamically-on-page-scroll-using-jquery-ajax-and-php/) - [Sticky Social Icons in Sidebar using jQuery](https://phppot.com/jquery/sticky-social-icons-in-sidebar-using-jquery/) - [Dynamic Star Rating with PHP and jQuery](https://phppot.com/jquery/dynamic-star-rating-with-php-and-jquery/) - [Facebook Style Like Unlike using PHP jQuery](https://phppot.com/jquery/facebook-style-like-unlike-using-php-jquery/) - [PHP Voting System with jQuery AJAX](https://phppot.com/jquery/php-voting-system-with-jquery-ajax/) - [Facebook Style URL Extract with PHP and jQuery AJAX](https://phppot.com/jquery/facebook-style-url-extract-with-php-and-jquery-ajax/) Need PHP help? [Work with me](https://phppot.com/work-with-me/ "Work with me") ![Portrait of Vincy, PHP developer](https://phppot.com/wp-content/themes/solandra/images/vincy.jpeg) Hi, I'm Vincy. I help build and improve PHP systems for eCommerce, payments, and legacy upgrades. I'm available for freelance work. [Work with me](https://phppot.com/work-with-me/ "Work with me") [vincy@phppot.com](mailto:vincy@phppot.com "Contact") Get Connected Popular Tutorials 1. [Simple PHP Shopping Cart](https://phppot.com/php/simple-php-shopping-cart/) 2. [Stripe Payment Gateway Integration using PHP](https://phppot.com/php/stripe-payment-gateway-integration-using-php/) 3. [User Registration in PHP with Login: Form with MySQL and Code Download](https://phppot.com/php/user-registration-in-php-with-login-form-with-mysql-and-code-download/) 4. [PHP Contact Form](https://phppot.com/php/php-contact-form/) 5. [How to Create Dynamic Stacked Bar, Doughnut and Pie charts in PHP with Chart.js](https://phppot.com/php/how-to-create-dynamic-stacked-bar-doughnut-and-pie-charts-in-php-with-chart-js/) Testimonials “She replied promptly. She asked all the right questions and provided a very quick turnaround time, along with support to get any issues ironed out ...” Salim, VIN Analytics, USA [Read more testimonials](https://phppot.com/testimonials/) ## Need help building or improving your PHP system? eCommerce, payments, upgrades, and ongoing support. [Work with me](https://phppot.com/work-with-me/) Resources - [Demo](https://phppot.com/demo/ "Demo") - [About](https://phppot.com/about/ "About") - [Contact](https://phppot.com/contact/ "Contact") - [Work with me](https://phppot.com/work-with-me/ "Work with me") - [Cancellation & Refund Policy](https://phppot.com/refund-policy/ "Cancellation & Refund Policy") Connect [LinkedIn](https://www.linkedin.com/in/vincya/ "LinkedIn Page") [Facebook](https://www.facebook.com/vincy.bay/ "Facebook Page") [X](https://x.com/GiftVincy "X (Twitter) Profile") [RSS](https://phppot.com/feed/ "RSS Feed") Newsletter Free weekly tutorials on PHP, Laravel, and React. © 2013 - 2026 [PHPpot](https://phppot.com/ "Helping you build websites") [Privacy](https://phppot.com/privacy-policy/ "Privacy Policy") • [Terms](https://phppot.com/terms-of-use/ "Terms of Use")
Readable Markdown	by [Vincy](https://phppot.com/about/). Last modified on October 12th, 2022. In this tutorial, we are using jQuery for reading JSON data from a PHP page via AJAX. On the PHP page, we are reading an array of database records and converting them into JSON data using PHP json\_encode(). Then, we are parsing JSON data and iterating objects from the jQuery function. If you want to know more about [JSON handling with PHP](https://phppot.com/php/json-handling-with-php-how-to-encode-write-parse-decode-and-convert/) the linked article will be a comprehensive guide for you. [View Demo](https://phppot.com/demo/read-display-json-data-using-jquery-ajax/) ## jQuery JSON Read Function This function will be called on the click event of a reading button. It uses jQuery getJSON function to read JSON data returned from a PHP page. It iterates JSON object array and appends results to HTML. ![jquery-json-read](https://phppot.com/wp-content/uploads/2014/11/jquery-json-read.png) The code is, ``` function readJSONData() { $('#loader-icon').css("display", "inline-block"); $.getJSON("read-tutorial-ajax.php", function(data) { }) .done(function(data) { var json_data; $('#read-data').show(); $('.demo-table').show(); $('#demo-table-content').empty(); $.each(data, function(i, tutorial) { json_data = '<tr>' + '<td valign="top">' + '<div class="feed_title">' + tutorial.title + '</div>' + '<div>' + tutorial.description + '</div>' + '</td>' + '</tr>'; $(json_data).appendTo('#demo-table-content'); }) $('#loader-icon').hide(); }) .fail(function() { var json_data; $('#read-data').show(); $('.demo-table').show(); $('#demo-table-content').empty(); json_data = '<tr>' + '<td valign="top">No Tutorials Found</td>' + '</tr>'; $(json_data).appendTo('#demo-table-content'); $('#loader-icon').hide(); }) } ``` ## HTML to display the read-JSON trigger and result on the UI This HTML code will show a button “Read JSON Data” on the UI when landing. On its click, it calls the readJSONData() function we saw in the above section. The JSON data returned by the server is appended to the target HTML DIV tag “demo-table-content” row by row. ``` <html> <head> <title>Read Display JSON Data using jQuery AJAX</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/styles.css" rel="stylesheet" type="text/css"> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script type="text/javascript" src="assets/js/read-json.js"></script> </head> <body> <div id="read-data"> <button class="btnRead" onClick="readJSONData();">Read JSON Data</button> <div id="loader-icon"> <img src="loader.gif" id="image-size" /> </div> </div> <table class="demo-table"> <tbody id="demo-table-content"> </tbody> </table> </body> </html> ``` ## Create JSON Data in PHP This PHP code reads data from the database. And then, using the [json\_encode() function](https://phppot.com/php/php-json-encode-and-decode/), it converts the database result array into JSON formatted string. It will be sent as a response to the jQuery getJSON request. The Code is, ``` <?php $connection = mysqli_connect("localhost", "root", "", "db_json_read"); $sql = "SELECT * FROM tutorial"; $statement = $connection->prepare($sql); $statement->execute(); $result = $statement->get_result(); $resultSet = array(); while ($row = $result->fetch_assoc()) { $resultSet[] = $row; } if (! empty($resultSet)) { print json_encode($resultSet); } ?> ``` ## Database Table SQL This SQL script contains the target database table structure and some initial data. By importing this script before running this example, you can see the expected result without causing any errors. With no data, this read-JSON example will show the message “No records found” on the UI. ``` CREATE TABLE `tutorial` ( `id` int(8) NOT NULL, `title` varchar(255) NOT NULL, `description` text NOT NULL, `rating` tinyint(2) DEFAULT NULL ); -- -- Dumping data for table `tutorial` -- INSERT INTO `tutorial` (`id`, `title`, `description`, `rating`) VALUES (1, 'Favorite Star Rating with jQuery', 'This tutorial is for doing favorite star ratings using jQuery. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user.', 1), (2, 'PHP RSS Feed Read and List', 'PHP\'s simplexml_load_file() function is used for reading data from XML file. Using this function, we can parse RSS feed to get item object array.', 3), (3, 'jQuery AJAX Autocomplete – Country Example', 'Autocomplete feature is used to provide an auto suggestion for users while entering input. It suggests country names for the users based on the keyword they entered into the input field by using jQuery AJAX.', 5); -- -- Indexes for dumped tables -- -- -- Indexes for table `tutorial` -- ALTER TABLE `tutorial` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tutorial` -- ALTER TABLE `tutorial` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; ``` [View Demo](https://phppot.com/demo/read-display-json-data-using-jquery-ajax/)[Download](https://phppot.com/downloads/jquery/read-display-json-data-using-jquery-ajax.zip)
Shard	25 (laksa)
Root Hash	16434601030132471625
Unparsed URL	com,phppot!/jquery/read-display-json-data-using-jquery-ajax/ s443