How to call Servlet using AJAX calling in AEM

Here is the sample ajax call to call a SlingServlet which is registered in cq.

• Here we will get the values of below two textfields and pass to the servlet by using their 'id'.
• After this you need to get the values in that appropriate servlet and apply your business logic.

<script>
$(document).ready(function() { 
$( ".perform" ).click(function() {
       var failure = function(err) {
             alert("Unable to retrive data "+err);
   };

  var val1=$('v1').val();
  var val2=$('v2').val();

    //Use JQuery AJAX request to post data to a Sling Servlet
    $.ajax({
         type: 'POST',  
         url:'/bin/imgcounter',
         data:{'value1' : val1,'value2' : val2},          //passing values to servlet
         success: function(msg){
            //Success logic here(The response from servlet)
         }
     });
    location.reload();
  });
    
});
</script>

 <form action="<%=currentPage.getPath()%>.html">
            Value1:<input type="text" id="v1"/>
            Value2:<input type="text" id="v2"/>
           <input type="submit" class="perform" value="Post to servlet!!!"/>
</form>