AJAX Rest API Call Sample - (response.json is the assumed file that API responds with)

index.html

<form onsubmit='APICall(); return false'>
  <input type='search' placeholder='Enter Search Keyword' id="input" />
  <input type='submit' value='Search'>
</form>
<!--Results will be here-->
<div id="show"></div>

<!--Include JQuery in the Site-->
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>

<!-- JavaScript Function that calls API -->
<script>
  
  function APICall(){
    var input = $("#input").val();
    //Making an ajax call to the API Site, say URL be: http://example.com/api/search.php?keyword=nepal
    var url = "http://example.com/api/search.php";
    var data = {
        keyword : input
    }

    var request = $.ajax({
        url : url,
        data : data,
        method : 'get',
        dataType : 'json'
    });
    
    //When API Call is successful
    request.success(function(response){
    
    if(response.length === 0){
       $('#show').html("No results found."); 
    } else {
      
      var print = "";
      //The response will be the json array of javascript. Let's make a table.
      for (var i = 0; i < response.length; i++){
        print += "<tr><td>" + response[i].name + "</td><td>" + response[i].city + "</td></tr>";
      }  
       $('#show').html("<table>" + print + "</table>"); 
       
      } 
      
      
    });
    
    //If API CAll Fails
    request.fail(function(response){
       $('#show').html("Failed to get data."); 
    });
    
    
    
    
  }
  
  
  
</script>

response.json

[
 
 {
   "name" : "Tika Pahadi", "city" : "Sindhuli", "country" : "Nepal"
 },
 
 {
   "name" : "Rohan Shahi", "city" : "Kathmandu", "country" : "Nepal"
 } 
  
  
  
  
  
]