{"id":213,"date":"2019-08-12T19:44:48","date_gmt":"2019-08-12T19:44:48","guid":{"rendered":"http:\/\/www.programmingfields.com\/?p=213"},"modified":"2026-05-02T06:31:59","modified_gmt":"2026-05-02T06:31:59","slug":"jquery-ajax-example-for-loading-data-in-php","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/","title":{"rendered":"Load Data From MySQL Database in PHP Using jQuery Ajax"},"content":{"rendered":"\n<p>The <strong>jQuery Ajax<\/strong> call will load the data from the database or from any file without refreshing the entire page. Using <strong>jQuery Ajax call<\/strong> the data loads asynchronously. This means the multiple functions can be executed at the same time not one by one. This is only possible by using Ajax. It optimizes the speed of the website and makes it fast than normal.  Today, I will be showing you how to load data from the MySQL database into PHP using <strong>jQuery Ajax<\/strong>. If you don&#8217;t know how to submit form data in PHP MySQL without page refresh then please go through my previous post.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"http:\/\/www.programmingfields.com\/ajax-php-form-handling-using-jquery\/\">Ajax PHP Form Handling Using jQuery<\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#jQuery_Ajax_Load\" >jQuery Ajax Load<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#Retrieve_MySQL_Data_in_the_HTML_Table_Using_jQuery_AJAX\" >Retrieve MySQL Data in the HTML Table Using jQuery AJAX<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#Create_a_database_connection_in_PHP\" >Create a database connection in PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#Insert_Records_in_the_Table\" >Insert Records in the Table<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#Create_a_Table_Using_Bootstrap\" >Create a Table Using Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#Create_jQuery_AJAX_Function\" >Create jQuery AJAX Function<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"jQuery_Ajax_Load\"><\/span>jQuery Ajax Load   <span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The jQuery provides a&nbsp;<code>load()<\/code>&nbsp;method.<\/li>\n\n\n\n<li>This method is used to load the data from the server or the local system or from any file.<\/li>\n\n\n\n<li>It returns the data into the selected element which is defined for any specific area.<\/li>\n\n\n\n<li><strong>jQuery load() <\/strong>method provides a very simple way to load the data asynchronously from the webserver. <\/li>\n\n\n\n<li>The basic syntax of this method is :<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">$(selector).load(URL, data, complete);<\/code><\/pre>\n\n\n\n<p>The parameter inside the jQuery load() method has the following meaning:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The first parameter (<em><strong>URL<\/strong><\/em>)&nbsp;specifies the source of the file that is to be load.<\/li>\n\n\n\n<li>The second parameter (<strong><em>data<\/em><\/strong>) which specifies the query string (i.e. key\/value pairs) that is sent to the webserver along with the request.<\/li>\n\n\n\n<li>The last parameter (<em><strong>complete)<\/strong><\/em> is just a callback function that executes when the request completes. It is just like a response which returns after the execution completes.<\/li>\n<\/ul>\n\n\n\n<p>Here is a simple example of load data using jquery ajax. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a PHP file and paste the below code.<\/li>\n\n\n\n<li>Now, create a text file with some content. In my case, I have created a <strong>.txt<\/strong> file with name <strong>content.txt<\/strong> and written some content as- <code>This is programming fields.<\/code> <\/li>\n<\/ul>\n\n\n\n<pre title=\"jquery-ajax-load.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;jQuery AJAX Load Method&lt;\/title&gt;\n\t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\t&lt;script&gt;\n\t\t$(document).ready(function() {\n\t\t\t$(\"#loadBtn\").click(function() {\n\n\t\t\t\t setTimeout(function () {\n                     $(\"#content\").text(\"Please wait while loading...\");\n                 }, 2);\n\t\t\t\t\n\t\t\t\t$(\"#content\").load('content.txt');\n\t\t\t});\n\t\t});\n\n\t&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;button type=\"button\" id=\"loadBtn\"&gt; Load Data &lt;\/button&gt;\n\t&lt;div id=\"content\"&gt; &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Save and execute the above code. You will see that the content of the <strong>.txt<\/strong> file will be loaded without refreshing the page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"88\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/jquery-ajax-call.gif?resize=376%2C88&#038;ssl=1\" alt=\"Demo of Loading data\" class=\"wp-image-304\"\/><figcaption class=\"wp-element-caption\"><strong>Demo of Loading data<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/php-import-csv-file-with-preview\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Import CSV File Data into MySQL Database Using PHP (opens in a new tab)\">Import CSV File Data into MySQL Database Using PHP<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Retrieve_MySQL_Data_in_the_HTML_Table_Using_jQuery_AJAX\"><\/span><strong>Retrieve MySQL Data in the HTML Table Using jQuery AJAX<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>In the next step, we are going to create a load more functionality using jQuery AJAX call in PHP. In this functionality, there will be a button. So, when you will click on the button, It will load 2 records from the database. On every click of the button, It will load the data from the database. Here, we will design a table layout along with a button. On the click of the button, the records will be loaded from the database without refreshing the page. So let&#8217;s create a database connection.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/dropdown-selection-filter-in-php-using-jquery-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Dropdown Selection Filter in PHP Using jQuery and Ajax (opens in a new tab)\">Dropdown Selection Filter in PHP Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_database_connection_in_PHP\"><\/span><strong>Create a database connection in PHP<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First of all, create a new PHP file for creating the database connection. In my case it is <strong>db-confg.php<\/strong>.<\/li>\n<\/ul>\n\n\n\n<pre title=\"db-config.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    $hostname = \"localhost\";\n    $username = \"root\";\n    $password = \"root\";\n    $dbname = \"phpAjaxDemo\";\n\n    $conn = mysqli_connect($hostname, $username, $password, $dbname) \n                             or die(\"Database connection failed.\" .mysqli_connect_error());\n?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now create a database if not created, or you can use the existing database.<\/li>\n\n\n\n<li>Create a new table with name <strong>registration<\/strong>.<\/li>\n\n\n\n<li>Here, is the database structure of the <strong>registration table<\/strong>.<\/li>\n<\/ul>\n\n\n\n<pre title=\"create table\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE TABLE `registration` (\n  `id` int(11) NOT NULL,\n  `first_name` varchar(20) NOT NULL,\n  `last_name` varchar(20) NOT NULL,\n  `email` varchar(100) NOT NULL,\n  `password` varchar(20) NOT NULL,\n  `address` varchar(100) NOT NULL,\n  `city` varchar(20) NOT NULL,\n  `state` varchar(20) NOT NULL,\n  `zip_code` int(6) NOT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Insert_Records_in_the_Table\"><\/span><strong>Insert Records in the Table<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I have already inserted some records in the table.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1144\" height=\"472\" src=\"https:\/\/i1.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/database-records-1.png?fit=1024%2C422\" alt=\"\" class=\"wp-image-232\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/database-records-1.png?w=1144&amp;ssl=1 1144w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/database-records-1.png?resize=300%2C124&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/database-records-1.png?resize=768%2C317&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/database-records-1.png?resize=1024%2C422&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Database table<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/jquery-file-upload-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Drag and Drop Multiple File Upload in PHP Using Dropzone js<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Table_Using_Bootstrap\"><\/span><strong>Create a Table Using Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, we&#8217;ll be creating another PHP file named <strong>index.php.<\/strong> Here, we&#8217;ll be creating a table layout using <a rel=\"noreferrer noopener\" aria-label=\"bootstrap (opens in a new tab)\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\">bootstrap<\/a>.<\/li>\n\n\n\n<li>So, include the bootstrap CDN or you can use the source file by downloading it.<\/li>\n\n\n\n<li>Here, is the source code of the <strong>index.php<\/strong> file.<\/li>\n<\/ul>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    include_once '.\/db-config.php';\n?&gt;\n&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;title&gt;jQuery AJAX Load Data - Programming Fields&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\"&gt;\n    &lt;script src=\".\/load-data.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\n    &lt;!-- -------- Font awesome 5 kit --&gt;\n    &lt;script src=\"https:\/\/kit.fontawesome.com\/44fb44d106.js\"&gt;&lt;\/script&gt;    \n&lt;\/head&gt;\n\n&lt;div class=\"container pt-5\"&gt;\n    &lt;div class=\"row\"&gt;\n        &lt;div class=\"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 m-auto d-block\"&gt;\n            &lt;table class=\"table table-striped\" id=\"firstTable\"&gt;\n                &lt;thead class=\"bg-success text-white\" id=\"firstThead\"&gt;\n                    &lt;th&gt; First Name &lt;\/th&gt;\n                    &lt;th&gt; Last Name &lt;\/th&gt;\n                    &lt;th&gt; Email &lt;\/th&gt;\n                    &lt;th&gt; Address &lt;\/th&gt;\n                    &lt;th&gt; City &lt;\/th&gt;\n                    &lt;th&gt; State &lt;\/th&gt;\n                    &lt;th&gt; Zipcode &lt;\/th&gt;\n                &lt;\/thead&gt;\n                &lt;tbody&gt;\n                    &lt;?php\n                         $sql = \"SELECT * FROM registration limit 2\";\n                         $result = mysqli_query($conn, $sql);\n                 \n                         if(mysqli_num_rows($result) &gt; 0) {\n                             $students = mysqli_fetch_all($result,MYSQLI_ASSOC);\n                             foreach($students as $student) : ?&gt;\n                                &lt;tr id=\"result\"&gt;\n                                    &lt;td&gt;&lt;?php echo $student['first_name']; ?&gt; &lt;\/td&gt;\n                                    &lt;td&gt;&lt;?php echo $student['last_name']; ?&gt; &lt;\/td&gt;\n                                    &lt;td&gt;&lt;?php echo $student['email']; ?&gt; &lt;\/td&gt;\n                                    &lt;td&gt;&lt;?php echo $student['address']; ?&gt; &lt;\/td&gt;\n                                    &lt;td&gt;&lt;?php echo $student['city']; ?&gt; &lt;\/td&gt;\n                                    &lt;td&gt;&lt;?php echo $student['state']; ?&gt; &lt;\/td&gt;\n                                    &lt;td&gt;&lt;?php echo $student['zip_code']; ?&gt; &lt;\/td&gt;\n                                &lt;\/tr&gt;\n                             &lt;?php endforeach; \n                         }   \n                         ?&gt;\n                &lt;\/tbody&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"row\"&gt;\n        &lt;div class=\"col-xl-6 col-md-6\"&gt;\n            &lt;button type=\"button\" class=\"btn btn-info btn-sm\" id=\"loadBtn\"&gt;&lt;i class=\"fa fa-refresh\"&gt;&lt;\/i&gt; Load More.. &lt;\/button&gt;\n        &lt;\/div&gt;\n\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.3\/umd\/popper.min.js\" integrity=\"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\" integrity=\"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>The above code is very simple to understand.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>At the top, I have included the <strong>db-config.php<\/strong> file in which, I have created the database connection.<\/li>\n\n\n\n<li>Then, created a table layout using the Bootstrap 4 classes.<\/li>\n\n\n\n<li>The bootstrap table contains the table body, in which I have created the PHP script for retrieving the records from the registration table which is shown above.<\/li>\n\n\n\n<li>In the table cell, I have printed the values.<\/li>\n\n\n\n<li>In the SQL query, I have used a limit of 2 so that the first time when you will run the script, It will print only 2 rows from the database table.<\/li>\n\n\n\n<li>Now, I&#8217;ll create a jQuery file for making AJAX request.<\/li>\n\n\n\n<li>Create a <strong>jQuery<\/strong> file with <strong>.js<\/strong> extension and paste the following code there. In my case the file name is <strong>load-data.js<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/php-file-upload-using-jquery-and-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"PHP File Upload Using jQuery and Ajax without Form Refresh (opens in a new tab)\">PHP File Upload Using jQuery and Ajax without Form Refresh<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_jQuery_AJAX_Function\"><\/span>Create jQuery AJ<strong>AX Function<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre title=\"load-data.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">$(document).ready(function() {\n    var recordCount         =       2;\n    $(\"#loadBtn\").click(function() {\n        \n        recordCount = recordCount + 2;\n        $.ajax({\n                    type: \"GET\",\n                    url: \".\/load-data.php?count=\"+recordCount,\n                    data: {},\n                    contentType: \"application\/json; charset=utf-8\",\n                    dataType: \"json\",                    \n                    cache: false,                       \n                    success: function(response) {                        \n                        var trHTML = '';\n                            $.each(response, function (i, item) {\n                                trHTML +=    '&lt;tr&gt;&lt;td&gt;' + item.first_name + '&lt;\/td&gt;&lt;td&gt;' + item.last_name +\n                               '&lt;\/td&gt;&lt;td&gt;' + item.email + '&lt;\/td&gt;&lt;td&gt;' + item.address + '&lt;\/td&gt;&lt;td&gt;' + item.city +\n                               '&lt;\/td&gt;&lt;td&gt;' + item.state + '&lt;\/td&gt;&lt;td&gt;' + item.zip_code + '&lt;\/td&gt;&lt;\/tr&gt;';\n                            });\n                            $('#firstTable').append(trHTML);\n                    },\n                    error: function (e) {\n                        console.log(response);\n                    }\n            });  \n    });        \n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, I have used the <strong>GET<\/strong> method to fetch the records from the database table using a <strong>PHP<\/strong> script. In the previous post, I had used the <a href=\"http:\/\/www.programmingfields.com\/ajax-php-form-handling-using-jquery\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">POST method<\/a>. Actually, we&#8217;re inserting the records into the database table there.<\/li>\n\n\n\n<li>The data type is <strong>JSON (JavaScript Object Notation). <\/strong>It is a very lightweight data-interchange format.<\/li>\n\n\n\n<li>In the URL, I have passed a PHP file URL <strong>(load-data.php)<\/strong>, in which I will create the PHP script for retrieving records from the database.<\/li>\n\n\n\n<li>After that, the response of success after th<strong>e AJAX cal<\/strong>l, It will return the data from the PHP file.<\/li>\n\n\n\n<li>So, let&#8217;s create one more PHP file with named <strong>load-data.php<\/strong> because I have used the URL above. in the jQuery file.<\/li>\n<\/ul>\n\n\n\n<pre title=\"load-data.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    include_once '.\/db-config.php';\n    $recordNewCount     =       $_GET['count'];\n\n    $sql                 =       \"SELECT * FROM registration limit $recordNewCount\";\n    $result              =       mysqli_query($conn, $sql);\n\n        if(mysqli_num_rows($result) &gt; 0) {\n           $data   =   mysqli_fetch_all($result,MYSQLI_ASSOC);\n           echo json_encode($data);\n       }       \n ?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, a SQL query has fired and It will return the data from the registration table and will convert it in the JSON format.<\/li>\n\n\n\n<li>Now, save and execute the index.php file. It will show the below result.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1139\" height=\"269\" src=\"https:\/\/i2.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX.png?fit=1024%2C242\" alt=\"\" class=\"wp-image-265\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX.png?w=1139&amp;ssl=1 1139w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX.png?resize=300%2C71&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX.png?resize=768%2C181&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX.png?resize=1024%2C242&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Data Loaded From Table<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Now, click on the Load more button, the 2 more records will be loaded in the same table without refreshing the page.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1177\" height=\"451\" src=\"https:\/\/i2.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX-Call.png?fit=1024%2C392\" alt=\"\" class=\"wp-image-266\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX-Call.png?w=1177&amp;ssl=1 1177w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX-Call.png?resize=300%2C115&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX-Call.png?resize=768%2C294&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-AJAX-Call.png?resize=1024%2C392&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Loaded More Data<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>On every click of the load more button, It will load 2 more records from the database table.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/www.programmingfields.com\/how-to-use-yajra-datatables-in-laravel-6\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Use Yajra Datatables in Laravel 6<\/a> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>As you can see here, the records have been loaded after clicking the load more button. I hope guys the above example will help you to retrieve the data in the PHP using jQuery AJAX. The most important part of this jQuery AJAX call is to load the data asynchronously without refreshing the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery Ajax call will load the data from the database or from any file without refreshing the entire page. Using jQuery Ajax call the data loads asynchronously. This means the multiple functions can be executed at the same time not one by one. This is only possible by using Ajax. It optimizes the speed [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":228,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[12,13,4],"tags":[9,158,11],"yst_prominent_words":[160,145,100,151,116,98,97,161,113,168,135,153,165,155,159,167,133,101,102,162],"class_list":{"0":"post-213","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ajax-tutorial","8":"category-jquery","9":"category-php","10":"tag-ajax-php-form-handling","11":"tag-jquery-ajax-callback","12":"tag-jquery-ajax-form-handling","13":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jquery-ajax-call.jpg?fit=560%2C315&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":2,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":8873,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/213\/revisions\/8873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=213"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}