{"id":1950,"date":"2019-09-19T12:00:00","date_gmt":"2019-09-19T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/post-request-to-php-rest-api-with-jquery-part-3\/"},"modified":"2026-07-05T03:24:35","modified_gmt":"2026-07-05T01:24:35","slug":"post-request-to-php-rest-api-with-jquery-part-3","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/post-request-to-php-rest-api-with-jquery-part-3\/","title":{"rendered":"POST Request to PHP REST API With JQuery \u2013 Part 3"},"content":{"rendered":"

This tutorial follows from Part 1 and Part 2<\/p>\n

Part 1 – Create a REST API in PHP<\/a><\/p>\n

Part 2 – Make a GET API Request Using JQuery<\/a><\/p>\n

You will learn how to write a method that makes a POST Request to the PHP REST API we created.<\/p>\n

So we’ll cover the following:<\/p>\n

    \n
  1. Create the HTML form<\/a><\/li>\n
  2. Write the JQuery method<\/a><\/li>\n
  3. Modify the Services.php file<\/a><\/li>\n
  4. Test the API<\/a><\/li>\n
  5. Next Steps<\/a><\/li>\n<\/ol>\n

     <\/p>\n

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

    Open the index.html for we created in Part 2<\/p>\n

    Create the html for with 3 inputs textboxes and on Submit button. I have put this codes inside a <div><\/div> tag,<\/p>\n

    The complete code for the form is given below:<\/p>\n

    <div<\/span> id=<\/span>\"insertDiv\"<\/span>><\/span>\n\t<h2><\/span>Insert New Student<\/h2><\/span>\n\t<label><\/span>Firstname: <\/label><\/span>\n\t<input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"txtFirstname\"<\/span> \/><br><\/span>\n\t<label><\/span>Lastname: <\/label><\/span>\n\t<input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"txtLastname\"<\/span> \/><br><\/span>\n\t<label><\/span>Location: <\/label><\/span>\n\t<input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"txtLocation\"<\/span> \/><br><\/span>\n\t<br><\/span>\n\t<input<\/span> type=<\/span>\"button\"<\/span> id=<\/span>\"saveStudent\"<\/span> value=<\/span>\"Save Student\"<\/span> \/><\/span>\n<\/div><\/span>\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    2. Write the JQuery Method<\/strong><\/p>\n
    At this point, we would now write a JQuery method the performs the POST request. This method runs on button-click for the “saveStudent” button.<\/p>\n
    Remember that to select the button, you use the # selector. So it would be #saveButton.<\/p>\n
    $(\"#saveStudent\"<\/span>).click(function<\/span>(){\n\tconsole.log(\"Inserting data...\"<\/span>)\n\tvar<\/span> fname =<\/span> $(\"#txtFirstname\"<\/span>).val();\n\tvar<\/span> lname =<\/span> $(\"#txtLastname\"<\/span>).val();\n\tvar<\/span> lctn =<\/span> $(\"#txtLocation\"<\/span>).val();\n\n\t\/\/Create a new Student object using the values from the textfields<\/span>\n\tvar<\/span> student =<\/span> {\n\t\tfirstname :<\/span> fname,\n\t\tlastname :<\/span> lname,\n\t\tlocation :<\/span> lctn\n\t};\n\t\n\t\/\/Make the POST request using $.post() to the same url<\/span>\n\t$.post(\"http:\/\/localhost\/demoweb\/services.php\"<\/span>, student, function<\/span>(data){\n\t\tconsole.log(data);\n\t});\n});\n<\/pre>\n
     <\/p>\n
    The code above would be inside the document.ready() function. But after the code for the GET request.<\/p>\n
     <\/p>\n
    3. Modify the services.php File<\/strong><\/p>\n
    Now, we need to modify the services.php file to also accept a post request. So we would use an if statement to check the request method. If the method is GET, then we execute existing code, but if it it POST, we execute the code for handling POST.<\/p>\n
    The entire content of the services.php file is given below. I have used comments to separate different sections<\/p>\n
    <?php<\/span>\n   $url<\/span> =<\/span> \"localhost:3301\"<\/span>;\n   $database<\/span> =<\/span> \"demodb\"<\/span>;\n   $username<\/span> =<\/span> \"root\"<\/span>;\n   $password<\/span> =<\/span> \"root\"<\/span>;\t\n\n   $conn<\/span> =<\/span> mysqli_connect<\/span>($url<\/span>, $username<\/span>, $password<\/span>, $database<\/span>);\n\n   if<\/span>(!<\/span>$conn<\/span>) {\n\tdie<\/span>(\"Unable to connect: \"<\/span> .<\/span> $conn<\/span>-><\/span>connect_error<\/span>);\n   }\n   \n   $method<\/span> =<\/span> $_SERVER<\/span>['REQUEST_METHOD'<\/span>];\n   if<\/span>($method<\/span> ==<\/span> \"GET\"<\/span>) {\n\n   \t   \/\/************** START OF GET REQUEST ************<\/span>\n\t   $sql<\/span> =<\/span> \"SELECT * FROM demodb.tblusers\"<\/span>;\n\t   $results<\/span> =<\/span> mysqli_query($conn<\/span>, $sql<\/span>);   \n\n\t   $rows<\/span> =<\/span> array<\/span>();\n\n\t   if<\/span>(mysqli_num_rows($results<\/span>) ><\/span> 0<\/span>){\n\t\twhile<\/span>($record<\/span> =<\/span> mysqli_fetch_assoc($results<\/span>)) {\n\t\t\tarray_push<\/span>($rows<\/span>, $record<\/span>);\n\t\t}\t\t\n\t\tprint<\/span> json_encode<\/span>($rows<\/span>);\n\t   }\n\t   else<\/span> {\n\t\t  echo<\/span>(\"No records found\"<\/span>);\n\t   }\n   }\n   \/\/*********** END OF GET REQUEST *************<\/span>\n\n  else<\/span> if<\/span>($method<\/span> ==<\/span> \"POST\"<\/span>)\n  {\n\t  $firstname<\/span> =<\/span> $_POST<\/span>[\"firstname\"<\/span>];\n  \t  $lastname<\/span> =<\/span> $_POST<\/span>[\"lastname\"<\/span>];\n\t  $location<\/span> =<\/span> $_POST<\/span>[\"location\"<\/span>];\n\t  \n\t  $sql_insert<\/span> =<\/span> \"INSERT INTO demodb.tblusers(id, firstname, lastname, location) <\/span>\n\t  VALUES (0, '<\/span>$firstname<\/span>', '<\/span>$lastname<\/span>', '<\/span>$location<\/span>')\"<\/span>;\n\t  \n\t  if<\/span>(mysqli_query($conn<\/span>, $sql_insert<\/span>)) {\n\t\t  echo<\/span> \"Student data was succesfully inserted into the database!\"<\/span>;\n\t  }\n\t  else<\/span> {\n\t\t  echo<\/span> \"Error occured. Data was not insered : \"<\/span>.<\/span> mysqli_error($conn<\/span>);\n\t  }\t\t  \t\t  \n  }\n\t \n  mysqli_close();\n?><\/span>\n<\/pre>\n
     <\/p>\n
    4. Test the API<\/strong><\/p>\n
    You can now upload all the files to the server.<\/p>\n
    Then visit http:\/\/localhost\/demoweb\/index.html<\/p>\n
    You will see the form as shown below.<\/p>\n
    Fill up the form and submit. Then refresh the page to see the new data submitted. If it works, thumbs up to you!<\/p>\n
     <\/p>\n
    5. Next Steps<\/strong><\/p>\n
    If you completed this part, then congrats!<\/p>\n
    Next, we would learn how to make a PUT request and a DELETE request.<\/p>\n
    Finally, we would now go on to see how to do all this an easy way!<\/p>\n
     <\/p>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    This tutorial follows from Part 1 and Part 2 Part 1 – Create a REST API in PHP Part 2 – Make a GET API … <\/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":[289],"tags":[],"class_list":["post-1950","post","type-post","status-publish","format-standard","hentry","category-rest-web-services"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1950","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=1950"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1950\/revisions"}],"predecessor-version":[{"id":2118,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1950\/revisions\/2118"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    \"\"<\/a><\/p>\n