{"id":643,"date":"2015-12-30T18:39:50","date_gmt":"2015-12-30T18:39:50","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=643"},"modified":"2023-11-15T13:09:28","modified_gmt":"2023-11-15T13:09:28","slug":"ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/","title":{"rendered":"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs"},"content":{"rendered":"

By using jQuery ajax<\/a> and post methods, you can load data in different HTML components like tables, lists, dropdowns, etc. You may also load data in Bootstrap tabs by using the $.ajax or $.post method of jQuery.<\/p>\n

In this tutorial, I will show you demos of using these methods where data will be loaded from a text file, as well as, by using a PHP file that connects to a MySQL database to retrieve data from its table.<\/p>\n

The table data will be shown in a\u00a0tab of Bootstrap without reloading the web page.<\/p>\n

A demo to load data from a text file<\/strong><\/h3>\n

In this demo, first I have created Bootstrap based tabs by using its built-in plug-in. Four tabs are created by built-in classes that are initiated as web page loads.<\/p>\n

The fourth tab, \u201cjQuery\u201d is filled by using the jQuery ajax method. See this demo online and I will explain what code is used to accomplish that.<\/p>\n

\"Bootstrap<\/p>\n

Code:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" integrity=\"sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==\" crossorigin=\"anonymous\">\r\n    <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"><\/script> \r\n\r\n<script>\r\n    $(document).ready(function(){\r\n      \r\n     $.ajax({url:\"ajax\/jquery.txt\",success:function(tabdata){\r\n     $(\"#jquerytab\").append(tabdata);\r\n    }});\r\n\r\n});\r\n<\/script>\r\n<style>\r\n.nav-tabs\r\n {\r\n   border-color:#004A00;\r\n   width:60%;\r\n }\r\n\r\n.nav-tabs > li a { \r\n    border: 1px solid #004A00;\r\n    background-color:#004A00; \r\n    color:#fff;\r\n    }\r\n\r\n.nav-tabs > li.active > a,\r\n.nav-tabs > li.active > a:focus,\r\n.nav-tabs > li.active > a:hover{\r\n    background-color:#D5FFD5;\r\n    color:#000;\r\n    border: 1px solid #1A3E5E;\r\n    border-bottom-color: transparent;\r\n    }\r\n\r\n.nav-tabs > li > a:hover{\r\n  background-color: #D5FFD5 !important;\r\n    border-radius: 5px;\r\n    color:#000;\r\n\r\n} \r\n\r\n.tab-pane {\r\n    border:solid 1px #004A00;\r\n    border-top: 0; \r\n    width:60%;\r\n    background-color:#D5FFD5;\r\n    padding:5px;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h3>A demo to load data from text file in Bootstrap Tab by $.ajax<\/h3>\r\n\r\n<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li><a href=\"#hometab\" role=\"tab\" data-toggle=\"tab\">Home<\/a><\/li>\r\n  <li><a href=\"#bstrap\" role=\"tab\" data-toggle=\"tab\">Bootstrap<\/a><\/li>\r\n  <li><a href=\"#csstab\" role=\"tab\" data-toggle=\"tab\">CSS<\/a><\/li>\r\n  <li class=\"active\"><a href=\"#jquerytab\" role=\"tab\" data-toggle=\"tab\">jQuery<\/a><\/li>\r\n  \r\n<\/ul>\r\n<\/li>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content\">\r\n  <div class=\"tab-pane\" id=\"hometab\">Write something for home tab<\/div>\r\n  <div class=\"tab-pane\" id=\"bstrap\">Bootstrap is a mobile first web framework<\/div>\r\n  <div class=\"tab-pane\" id=\"csstab\">The CSS is used to style web pages!<\/div>\r\n  <div class=\"tab-pane active\" id=\"jquerytab\"><\/div>\r\n  \r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
You can see that the demo page shows jQuery tab opened as the web page loads. I have kept this tab as \u201cactive\u201d<\/em> by using the .active<\/em> class.<\/p>\n
I assume you already have an\u00a0idea about how to create Bootstrap tabs. The focus is loading data by using $.ajax call<\/em>. For that, look at the \u201cjQuery\u201d tab\u2019s tag.<\/div>\n
Its tab is created just like three other tabs:<\/p>\n
<li class=\"active\"><a href=\"#jquerytab\" role=\"tab\" data-toggle=\"tab\">jQuery<\/a><\/li><\/pre>\n
Whereas, if you look at the tab pane\u2019s area, this code is used:<\/p>\n
<div class=\"tab-pane active\" id=\"jquerytab\"><\/div><\/pre>\n
Still, no difference, except no text or content is given there, unlike all three other tabs. Now look at the <script> section in head tag:<\/p>\n
<script>\r\n\r\n$(document).ready(function(){\r\n\r\n\r\n$.ajax({url:\"ajax\/jquery.txt\",success:function(tabdata){\r\n\r\n$(\"#jquerytab\").append(tabdata);\r\n\r\n}});\r\n\r\n\r\n});\r\n\r\n<\/script><\/pre>\n
This is where the div of \u201cjQuery\u201d tab is called after using the $.ajax jQuery method. The ajax method loads data from the given text file which (if successful) will be assigned or appended to the \u201c#jquerytab\u201d<\/em>, which is the id of jQuery tab.<\/p>\n
A demo of $.post method to load data in Bootstrap tabs by PHP\/MySQL<\/strong><\/h3>\n
In this demo, I have used $.post jQuery method<\/strong><\/a>, rather than $.ajax. Also, instead of a text file, I have loaded data from the MySQL database by using the PHP script.<\/p>\n
The script is called in the $.post method.<\/p>\n
\"Bootstrap<\/p>\n
HTML, CSS and jQuery:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" integrity=\"sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==\" crossorigin=\"anonymous\">\r\n    <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"><\/script> \r\n\r\n<script>\r\n$(document).ready(function(){\r\n    $(\"#loaddata\").click(function(){\r\n    $.post(\"fetchtab.php\",function(postresult){\r\n    $(\"#products\").html(postresult);\r\n    });\r\n });    \r\n});\r\n\r\n<\/script>\r\n\r\n<style>\r\n.nav-tabs\r\n {\r\n   border-color:#B12926;\r\n   width:60%;\r\n }\r\n\r\n.nav-tabs > li a { \r\n    border: 1px solid #B12926;\r\n    background-color:#B12926; \r\n    color:#fff;\r\n    border-top-left-radius: 10px;\r\n    border-top-right-radius: 10px;\r\n    }\r\n\r\n.nav-tabs > li.active > a,\r\n.nav-tabs > li.active > a:focus,\r\n.nav-tabs > li.active > a:hover{\r\n    background-color:#F9E0DF;\r\n    color:#000;\r\n    border: 1px solid #B12926;\r\n    border-bottom-color: transparent;\r\n    border-top-left-radius: 10px;\r\n    border-top-right-radius: 10px;\r\n    }\r\n\r\n.nav-tabs > li > a:hover{\r\n  background-color: #F9E0DF !important;\r\n    border-radius: 5px;\r\n    color:#000;\r\n    border-top-left-radius: 10px;\r\n    border-top-right-radius: 10px;    \r\n\r\n} \r\n\r\n.tab-pane {\r\n    border:solid 1px #B12926;\r\n    border-top: 0; \r\n    width:60%;\r\n    background-color:#F9E0DF;\r\n    padding:5px;\r\n}\r\n\r\n.demotbl {\r\n    \r\n  }\r\n.demotbl th{\r\n    padding:15px;\r\n    color:#fff;\r\n    text-shadow:1px 1px 1px #568F23;\r\n    border-bottom:3px solid #9ED929;\r\n    background-color:#49636D;\r\n    background:-webkit-gradient(\r\n        linear,\r\n        left bottom,\r\n        left top,\r\n        color-stop(0.02, rgb(73,99,109)),\r\n        color-stop(0.51, rgb(73,99,109)),\r\n        color-stop(0.87, rgb(73,99,109))\r\n        );\r\n    background: -moz-linear-gradient(\r\n        center bottom,\r\n        rgb(73,99,109) 3%,\r\n        rgb(73,99,109) 52%,\r\n        rgb(73,99,109) 88%\r\n        );\r\n    -webkit-border-top-left-radius:5px;\r\n    -webkit-border-top-right-radius:5px;\r\n    -moz-border-radius:5px 5px 0px 0px;\r\n    border-top-left-radius:5px;\r\n    border-top-right-radius:5px;\r\n  }\r\n.demotbl td{\r\n    width:100px;\r\n    padding:10px;\r\n    text-align:center;\r\n    vertical-align: top;\r\n    background-color:#BDCDD2;\r\n    border: 1px solid #BED3AB;\r\n    -moz-border-radius:2px;\r\n    -webkit-border-radius:2px;\r\n    border-radius:2px;\r\n    color:#000;\r\n    text-shadow:1px 1px 1px #fff;\r\n\r\n  }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h3>A demo to load data from MysQL DB in Bootstrap Tab by $.post<\/h3>\r\n\r\n<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li><a href=\"#hometab\" role=\"tab\" data-toggle=\"tab\">Home<\/a><\/li>\r\n  <li><a href=\"#reviews\" role=\"tab\" data-toggle=\"tab\">Reviews<\/a><\/li>\r\n  <li><a href=\"#featurestab\" role=\"tab\" data-toggle=\"tab\">Features<\/a><\/li>\r\n  <li class=\"active\"><a href=\"#products\" role=\"tab\" data-toggle=\"tab\">Products<\/a><\/li>\r\n  \r\n<\/ul>\r\n<\/li>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content\">\r\n  <div class=\"tab-pane\" id=\"hometab\">Write something for home tab<\/div>\r\n  <div class=\"tab-pane\" id=\"reviews\">Reviews Tab \/ Add reviews here<\/div>\r\n  <div class=\"tab-pane\" id=\"featurestab\">Present features here<\/div>\r\n  <div class=\"tab-pane active\" id=\"products\"> <button type=\"button\" class=\"btn btn-danger active\" id=\"loaddata\">Load Products Data<\/button><\/div>\r\n    \r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
PHP code:<\/strong><\/p>\n
< ?php\r\n\/\/Remove space in PHP tag\r\n \r\n$dbhostname = 'localhost';\r\n \r\n$dbusername = 'userid';\r\n \r\n$dbpassword = 'password';\r\n \r\n$conn = mysql_connect($dbhostname, $dbusername, $dbpassword);\r\n \r\nif(! $conn )\r\n \r\n{\r\n \r\n  die('Could not connect: ' . mysql_error());\r\n \r\n}\r\n \r\necho 'MySQL Database Connected!'.\"<BR>\";\r\n \r\nmysql_select_db(\"testDB\") or die(mysql_error());\r\n \r\necho \"Database found and connected!\".\"<BR>\";\r\n \r\n$sql_statemanet = \"select * from tbl_products\";\r\n \r\n$rec_select = mysql_query( $sql_statemanet);\r\n \r\nif(! $rec_select )\r\n \r\n{\r\n \r\n  die('Could not retrieve data: ' . mysql_error());\r\n \r\n}\r\n \r\n\/\/Displaying fetched records to HTML table\r\n \r\necho \"<table class='demotbl'>\";\r\n \r\necho \"<tr> <th>ID<\/th> <th>Product <\/th> <th>Quality <\/th> <th>Quantity <\/th><\/tr>\";\r\n \r\n\/\/ Using mysql_fetch_array() to get the next row until end of table rows\r\n \r\nwhile($row = mysql_fetch_array( $rec_select )) {\r\n \r\n                \/\/ Print out the contents of each row into a table\r\n \r\n                echo \"<tr><td>\";\r\n \r\n                echo $row['Product_ID'];\r\n \r\n                echo \"<\/td><td>\";\r\n                \r\n                echo $row['Product_Name'];\r\n \r\n                echo \"<\/td><td>\";\r\n\r\n                echo $row['Product_Quality'];\r\n \r\n                echo \"<\/td><td>\";\r\n                \r\n                echo $row['Product_Quantity'];\r\n \r\n                echo \"<\/td><\/tr>\";                                \r\n \r\n}\r\n \r\nmysql_close($conn);\r\n \r\n?>\r\n\r\n<\/pre>\n
The jQuery post method will execute as you click the button \u201cLoad Products Data\u201d<\/em> unlike the above example where it loaded data as the web page opened. I used this to show the data loading without refreshing the web page by using Ajax\u2019s post method of jQuery.<\/p>\n
The line:<\/p>\n
$.post(“fetchtab.php”,function(postresult){<\/p><\/blockquote>\n
calls the fetchtab.php<\/em> file, that connects to the MySQL database server and retrieves the product information from the specified table in SQL query. The file also returns the HTML table with the DB table\u2019s data as a response to the request in $.post method.<\/p>\n
The postresult<\/em> will get the returned information (if successful) and is assigned to products pane<\/em> of Bootstrap tabs<\/a>.<\/p>\n
$(\"#products\").html(postresult);<\/pre>\n
In the markup section, the tabs are created just like the above example.<\/p>\n
You can also see the <style> tag in the <head> section that contains the style for tabs which overrides the Bootstrap classes for tabs. Along with it, classes for displaying HTML tables can also be seen there.<\/p>\n
Feel free to change styles, if you liked these demos!<\/p>\n","protected":false},"excerpt":{"rendered":"
By using jQuery ajax and post methods, you can load data in different HTML components like tables, lists, dropdowns, etc. You may also load data in Bootstrap tabs by using the $.ajax or $.post method of jQuery. In this tutorial, I will show you demos of using these methods where data will be loaded from … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":645,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[39,38],"yoast_head":"\nAJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs\" \/>\n<meta property=\"og:description\" content=\"By using jQuery ajax and post methods, you can load data in different HTML components like tables, lists, dropdowns, etc. You may also load data in Bootstrap tabs by using the $.ajax or $.post method of jQuery. In this tutorial, I will show you demos of using these methods where data will be loaded from ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-30T18:39:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-15T13:09:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/12\/15.2.2-Bootstrap-tabs-post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"696\" \/>\n\t<meta property=\"og:image:height\" content=\"355\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/\",\"url\":\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/\",\"name\":\"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2015-12-30T18:39:50+00:00\",\"dateModified\":\"2023-11-15T13:09:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/","og_locale":"en_US","og_type":"article","og_title":"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs","og_description":"By using jQuery ajax and post methods, you can load data in different HTML components like tables, lists, dropdowns, etc. You may also load data in Bootstrap tabs by using the $.ajax or $.post method of jQuery. In this tutorial, I will show you demos of using these methods where data will be loaded from ... Read more","og_url":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/","article_published_time":"2015-12-30T18:39:50+00:00","article_modified_time":"2023-11-15T13:09:28+00:00","og_image":[{"width":696,"height":355,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/12\/15.2.2-Bootstrap-tabs-post.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/","url":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/","name":"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2015-12-30T18:39:50+00:00","dateModified":"2023-11-15T13:09:28+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/ajax-post-in-jquery-to-load-data-from-text-mysql-in-bootstrap-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"AJAX \/ Post in jQuery to load data from Text File\/ MySQL in Bootstrap Tabs"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/643"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/643\/revisions"}],"predecessor-version":[{"id":11349,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/643\/revisions\/11349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/645"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}