Call php api from javascript

In this post, we are going to talk about how we can create a simple REST API in PHP and call them in JavaScript using various technologies. For example, using XMLHttpRequest, jQuery AJAX and AngularJS AJAX. In order to create a simple REST API that might actually be used in practice, we are going to use WordPress API namely the username_exists() function that allow us to check if the username exist in a WordPress database and return true if the username exists or false otherwise. For simplicity, we are going to skip on how to build a WordPress site, and go straight to writing the PHP code for the simple REST API.

PHP code for simple REST API

  // Include the wp-load.php so that we can use username_exists() function in WordPress API
  $parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
  require_once( $parse_uri[0] . 'wp-load.php' );

  $data = array();
  $username = sanitize_text_field($_POST['username']);

  if (username_exists($username)) {
    $data["username"] = $username;
    $data["result"] = true;
  }else {
    $data["username"] = $username;
    $data["result"] = false;
  }

  // return all our data to an AJAX call
  echo json_encode($data, JSON_PRETTY_PRINT);

source code hosted on GitHub
Live link hosted on JenRenalCare.com

An example of a response from this simple REST API is as follows, or you may click the link above. (Notice that the request would have to be POST, you may test it out using Postman)

  { "username": "poanchen", "result": false }

Now we have a really simple REST API that allows us to check if the username exist or not. This is especially useful in registration form where we allow the user to know if the username exist or not before they submit the form. This can be done using JavaScript. First example that I would like to show is using XMLHttpRequest. Here is a sample code that does the job.

Code for using XMLHttpRequest

   type="text" id="username" name="username" placeholder="username">
   id="usernameResult">

  

source code hosted on GitHub
Live link hosted on JenRenalCare.com
Try it on CodePen

As the user type, they may immediately see if the username is taken or not. An example of taken username is test.

Another example that I would like to show is using jQuery AJAX. Here is a sample code that does the job.

Code for using jQuery AJAX

     type="text" id="username" name="username" placeholder="username">
     id="usernameResult">

    
    

source code hosted on GitHub
Live link hosted on JenRenalCare.com
Try it on CodePen

As the user type, they may immediately see if the username is taken or not. An example of taken username is test as mentioned earlier.

Another example that I would like to show is using AngularJS AJAX. Here is a sample code that does the job.

Code for using AngularJS AJAX

   ng-app="usernameApp" ng-controller="usernameController">
     type="text" ng-model="username" ng-keyup="usernameKeyup()" placeholder="username">
    
{{ return_message }}