{"id":1949,"date":"2019-09-19T12:00:00","date_gmt":"2019-09-19T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/get-request-to-php-api-using-jquery-part-2\/"},"modified":"2026-07-05T03:24:33","modified_gmt":"2026-07-05T01:24:33","slug":"get-request-to-php-api-using-jquery-part-2","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/get-request-to-php-api-using-jquery-part-2\/","title":{"rendered":"GET Request to PHP API Using JQuery \u2013 Part 2"},"content":{"rendered":"

This tutorial follows from Part 1.<\/a><\/p>\n

In this tutorial, you would learn how to call the PHP API from a html page. We would use JQuery to make the REST API call. Then the data returned will be displayed on\u00a0 html page.<\/p>\n

Note:<\/strong>\u00a0Later I would show you an easier way to fectch MySQL data. That is using PDO. But for now, try learn how it works!<\/p>\n

The three steps are:<\/p>\n

    \n
  1. Create the HTML Page<\/a><\/li>\n
  2. Write the JQuery Script<\/a><\/li>\n
  3. Test the API<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Create the HTML Page<\/strong><\/p>\n

    Inside the same folder as the services.php, create html file. Name it index.html<\/p>\n

    The file should have the following structure:<\/p>\n

    <\/p>\n

    <html><\/span>\n<head><\/span>\n<title><\/span>Consume PHP Web Service<\/title><\/span>\n\n<script <\/span>src=<\/span>\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"<\/span>><\/script><\/span>\n<script><\/span> \n\t\/\/ JQuery coded goes here<\/span>\n<\/script><\/span>\n\n<\/head><\/span>\n\n<body><\/span>\n\n<div><\/span>\n\t<h2><\/span> List of Students <\/h2><\/span>\t\n\t<ol<\/span> id=<\/span>\"students\"<\/span>><\/span>\n\t<!-- list goes here --><\/span>\n\t<\/ol><\/span>\n<\/div><\/span>\n\n<\/body><\/span>\n<\/html><\/span>\n<\/pre>\n
     <\/p>\n
    2. Write the JQuery Script<\/strong><\/p>\n
    Now, inside the second <Script><\/Script> tag, write the code to make a rest call to the services.php. The code fetches the data and encodes it as a json. Finally it appends it as <li><\/li> items to the students elements.<\/p>\n
    The full code is given below. You need to put this code in the <script><\/script> tag.<\/p>\n
    \/\/ JQuery coded goes here<\/span>\n$.get(\"http:\/\/localhost\/demoweb\/services.php\"<\/span>, function<\/span>(data, status){\n        \/\/ Parse the data and save it in studentList variable<\/span>\t\n        var<\/span> studentList =<\/span> JSON.parse(data);\n\tfor<\/span>(var<\/span> i =<\/span> 0<\/span>; i <<\/span> studentList.length; i++<\/span>) {\n\t\tvar<\/span> student =<\/span> \"id: \"<\/span> +<\/span> studentList[i].id +<\/span>\n\t\t\t\t\t  \" firstname: \"<\/span> +<\/span> studentList[i].firstname +<\/span>\n\t\t\t\t\t  \" lastname: \"<\/span> +<\/span> studentList[i].lastname +<\/span>\n\t\t\t\t\t  \" location: \"<\/span> +<\/span> studentList[i].location;\n\t\t\/\/add the item to page as list items <li><\/span>\n\t\tstudent =<\/span> \"<li>\"<\/span> +<\/span> student +<\/span> \"<\/li>\"<\/span>;\n\t\t$(\"#students\"<\/span>).append(student);\n\t}\n});\n<\/pre>\n
     <\/p>\n
    3. Test the API<\/strong><\/p>\n
    Open the browser and visit, http:\/\/localhost\/demoweb\/index.html<\/p>\n
    You will see the list of items fetched from the database as shown below<\/p>\n
    \"\"<\/a><\/p>\n
     <\/p>\n
    Next Steps<\/strong><\/p>\n
    Next, we would write a PHP method to make a POST request. This would insert an student record into the MySQL database.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This tutorial follows from Part 1. In this tutorial, you would learn how to call the PHP API from a html page. We would use … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1949","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1949"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1949\/revisions"}],"predecessor-version":[{"id":2117,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1949\/revisions\/2117"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    At this point, you can copy over the files to the server folder. We created this folder in Part 1<\/a>.<\/p>\n