How to Make AJAX Call on Same Page

Being a web developer, we always try to use an Ajax request on the same page. If we don’t use the same page by the right way for Ajax response, then it returns header content in response.

In this tutorial, we will see how to handle an Ajax request on the same page or how to use the same page for an Ajax call

HTML

<input type='button' id='btn' data-id=50 value='Edit' /> 

jQuery

First including library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Sending AJAX Call To Same Page

<script>
        $('#btn').click(function(){
            var eid = $(this).data('id');
            $.ajax
            ({ 
                url: 'aaa.php',  //replace with your own url
                data: {"eid": eid},
                type: 'POST',
                success: function(result)
                {
                    alert(result)
                }
            });
        });
  </script>  

PHP

<?php 
if (isset($_POST['eid'])) {     
ob_clean();        
$eid = $_POST['eid'];
echo $eid; 
exit();     
}
?> 

Here we are using the same page for an Ajax call to ob_clean() function. This function cleans the output buffer. So Using this we remove header content from the response.